@shopify/hydrogen-react 0.0.0-next-ea3959b → 0.0.0-next-dada720

package/dist/node-prod/useShopifyCookies.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require$$0 = require("react");
+const cookie = require("worktop/cookie");
+const cartConstants = require("./cart-constants.js");
+const cookiesUtils = require("./cookies-utils.js");
+const longTermLength = 60 * 60 * 24 * 360 * 1;
+const shortTermLength = 60 * 30;
+function useShopifyCookies(options) {
+  const { hasUserConsent = false, domain = "" } = options || {};
+  require$$0.useEffect(() => {
+    const cookies = cookiesUtils.getShopifyCookies(document.cookie);
+    if (hasUserConsent) {
+      setCookie(
+        cartConstants.SHOPIFY_Y,
+        cookies[cartConstants.SHOPIFY_Y] || cookiesUtils.buildUUID(),
+        longTermLength,
+        domain
+      );
+      setCookie(
+        cartConstants.SHOPIFY_S,
+        cookies[cartConstants.SHOPIFY_S] || cookiesUtils.buildUUID(),
+        shortTermLength,
+        domain
+      );
+    } else {
+      setCookie(cartConstants.SHOPIFY_Y, "", 0, domain);
+      setCookie(cartConstants.SHOPIFY_S, "", 0, domain);
+    }
+  });
+}
+function setCookie(name, value, maxage, domain) {
+  document.cookie = cookie.stringify(name, value, {
+    maxage,
+    domain,
+    samesite: "Lax",
+    path: "/"
+  });
+}
+exports.useShopifyCookies = useShopifyCookies;
+//# sourceMappingURL=useShopifyCookies.js.map

package/dist/node-prod/useShopifyCookies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n  const {hasUserConsent = false, domain = ''} = options || {};\n  useEffect(() => {\n    const cookies = getShopifyCookies(document.cookie);\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      setCookie(\n        SHOPIFY_Y,\n        cookies[SHOPIFY_Y] || buildUUID(),\n        longTermLength,\n        domain\n      );\n      setCookie(\n        SHOPIFY_S,\n        cookies[SHOPIFY_S] || buildUUID(),\n        shortTermLength,\n        domain\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domain);\n      setCookie(SHOPIFY_S, '', 0, domain);\n    }\n  });\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n"],"names":["useEffect","getShopifyCookies","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzDA,aAAAA,UAAU,MAAM;AACR,UAAA,UAAUC,aAAAA,kBAAkB,SAAS,MAAM;AAKjD,QAAI,gBAAgB;AAClB;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKC,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACEC,cAAA;AAAA,QACA,QAAQA,cAAAA,SAAS,KAAKD,uBAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAAD,cAAAA,WAAW,IAAI,GAAG,MAAM;AACxB,gBAAAE,cAAAA,WAAW,IAAI,GAAG,MAAM;AAAA,IACpC;AAAA,EAAA,CACD;AACH;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAASC,iBAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;;"}

package/dist/node-prod/useShopifyCookies.mjs

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { stringify } from "worktop/cookie";
+import { SHOPIFY_Y, SHOPIFY_S } from "./cart-constants.mjs";
+import { getShopifyCookies, buildUUID } from "./cookies-utils.mjs";
+const longTermLength = 60 * 60 * 24 * 360 * 1;
+const shortTermLength = 60 * 30;
+function useShopifyCookies(options) {
+  const { hasUserConsent = false, domain = "" } = options || {};
+  useEffect(() => {
+    const cookies = getShopifyCookies(document.cookie);
+    if (hasUserConsent) {
+      setCookie(
+        SHOPIFY_Y,
+        cookies[SHOPIFY_Y] || buildUUID(),
+        longTermLength,
+        domain
+      );
+      setCookie(
+        SHOPIFY_S,
+        cookies[SHOPIFY_S] || buildUUID(),
+        shortTermLength,
+        domain
+      );
+    } else {
+      setCookie(SHOPIFY_Y, "", 0, domain);
+      setCookie(SHOPIFY_S, "", 0, domain);
+    }
+  });
+}
+function setCookie(name, value, maxage, domain) {
+  document.cookie = stringify(name, value, {
+    maxage,
+    domain,
+    samesite: "Lax",
+    path: "/"
+  });
+}
+export {
+  useShopifyCookies
+};
+//# sourceMappingURL=useShopifyCookies.mjs.map

package/dist/node-prod/useShopifyCookies.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n  const {hasUserConsent = false, domain = ''} = options || {};\n  useEffect(() => {\n    const cookies = getShopifyCookies(document.cookie);\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      setCookie(\n        SHOPIFY_Y,\n        cookies[SHOPIFY_Y] || buildUUID(),\n        longTermLength,\n        domain\n      );\n      setCookie(\n        SHOPIFY_S,\n        cookies[SHOPIFY_S] || buildUUID(),\n        shortTermLength,\n        domain\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domain);\n      setCookie(SHOPIFY_S, '', 0, domain);\n    }\n  });\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAetB,SAAS,kBAAkB,SAA0C;AAC1E,QAAM,EAAC,iBAAiB,OAAO,SAAS,GAAE,IAAI,WAAW;AACzD,YAAU,MAAM;AACR,UAAA,UAAU,kBAAkB,SAAS,MAAM;AAKjD,QAAI,gBAAgB;AAClB;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MAAA;AAAA,IACF,OACK;AACK,gBAAA,WAAW,IAAI,GAAG,MAAM;AACxB,gBAAA,WAAW,IAAI,GAAG,MAAM;AAAA,IACpC;AAAA,EAAA,CACD;AACH;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAAS,UAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;"}

package/dist/types/AddToCartButton.d.ts

@@ -1,5 +1,5 @@
 import { BaseButtonProps } from './BaseButton.js';
-export interface AddToCartButtonProps {
+export interface AddToCartButtonPropsBase {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
         key: string;
@@ -14,8 +14,9 @@ export interface AddToCartButtonProps {
     /** The selling plan ID of the subscription variant */
     sellingPlanId?: string;
 }
+export type AddToCartButtonProps<AsType extends React.ElementType = 'button'> = AddToCartButtonPropsBase & BaseButtonProps<AsType>;
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
-export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
+export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps<AsType>): JSX.Element;

package/dist/types/BuyNowButton.d.ts

@@ -1,5 +1,5 @@
 import { BaseButtonProps } from './BaseButton.js';
-interface BuyNowButtonProps {
+interface BuyNowButtonPropsBase {
     /** The item quantity. Defaults to 1. */
     quantity?: number;
     /** The ID of the variant. */
@@ -10,6 +10,10 @@ interface BuyNowButtonProps {
         value: string;
     }[];
 }
-/** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
-export declare function BuyNowButton<AsType extends React.ElementType = 'button'>(props: BuyNowButtonProps & BaseButtonProps<AsType>): JSX.Element;
+type BuyNowButtonProps<AsType extends React.ElementType = 'button'> = BuyNowButtonPropsBase & BaseButtonProps<AsType>;
+/**
+ * The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.
+ * Must be a child of a `CartProvider` component.
+ */
+export declare function BuyNowButton<AsType extends React.ElementType = 'button'>(props: BuyNowButtonProps<AsType>): JSX.Element;
 export {};

package/dist/types/CartCheckoutButton.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
 import { BaseButtonProps } from './BaseButton.js';
-type PropsWeControl = 'onClick';
+type ChildrenProps = {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+};
+type CartCheckoutButtonProps = Omit<BaseButtonProps<'button'>, 'onClick'> & ChildrenProps;
 /**
  * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
  * It must be a descendent of a `CartProvider` component.
  */
-export declare function CartCheckoutButton(props: Omit<BaseButtonProps<'button'>, PropsWeControl> & {
-    /** A `ReactNode` element. */
-    children: ReactNode;
-}): JSX.Element;
+export declare function CartCheckoutButton(props: CartCheckoutButtonProps): JSX.Element;
 export {};

package/dist/types/CartCost.d.ts

@@ -1,13 +1,15 @@
 import { Money } from './Money.js';
-export interface CartCostProps {
+interface CartCostPropsBase {
     /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */
     amountType?: 'total' | 'subtotal' | 'tax' | 'duty';
     /** Any `ReactNode` elements. */
     children?: React.ReactNode;
 }
+type CartCostProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostPropsBase;
 /**
- * The `CartCost` component renders a `Money` component with the
- * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
-Depends on `useCart()` and must be a child of `<CartProvider/>`
+ * The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.
+ * If no `amountType` prop is specified, then it defaults to `totalAmount`.
+ * Depends on `useCart()` and must be a child of `<CartProvider/>`
  */
-export declare function CartCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostProps): JSX.Element | null;
+export declare function CartCost(props: CartCostProps): JSX.Element | null;
+export {};

package/dist/types/CartLinePrice.d.ts

@@ -1,7 +1,7 @@
 import { Money } from './Money.js';
 import { CartLine } from './storefront-api-types.js';
 import { PartialDeep } from 'type-fest';
-interface CartLinePriceProps {
+interface CartLinePricePropsBase {
     /** A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine). */
     data: PartialDeep<CartLine, {
         recurseIntoArrays: true;
@@ -9,9 +9,9 @@ interface CartLinePriceProps {
     /** The type of price. Valid values:`regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
 }
+type CartLinePriceProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePricePropsBase;
 /**
- * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
- * compare at price.
+ * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.
  */
-export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice(props: CartLinePriceProps): JSX.Element | null;
 export {};

package/dist/types/CartLineProvider.d.ts

@@ -1,16 +1,18 @@
 import { type ReactNode } from 'react';
-import { CartLine } from './storefront-api-types.js';
+import type { CartLine } from './storefront-api-types.js';
 export declare const CartLineContext: import("react").Context<CartLine | null>;
 /**
  * The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.
  */
 export declare function useCartLine(): CartLine;
-/**
- * The `CartLineProvider` component creates a context for using a cart line.
- */
-export declare function CartLineProvider({ children, line, }: {
+type CartLineProviderProps = {
     /** Any `ReactNode` elements. */
     children: ReactNode;
     /** A cart line object. */
     line: CartLine;
-}): JSX.Element;
+};
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
+export declare function CartLineProvider({ children, line }: CartLineProviderProps): JSX.Element;
+export {};

package/dist/types/CartProvider.d.ts

@@ -6,7 +6,7 @@ export declare const CartContext: import("react").Context<CartWithActions | null
  * The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.
  */
 export declare function useCart(): CartWithActions;
-export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: {
+type CartProviderProps = {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
@@ -53,8 +53,18 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-}): JSX.Element;
+};
+/**
+ * The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart,
+ * and allows you to more easily manipulate the cart by adding, removing, and updating it.
+ * It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.
+ *
+ * There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart.
+ * There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.
+ */
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: CartProviderProps): JSX.Element;
 /** Check for storage availability funciton obtained from
  * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */
 export declare function storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean | undefined;
+export {};

package/dist/types/ExternalVideo.d.ts

@@ -13,8 +13,7 @@ interface BaseProps {
      */
     options?: YouTube | Vimeo;
 }
-type PropsWeControl = 'src';
-export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & BaseProps;
+export type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> & BaseProps;
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

package/dist/types/Image.d.ts

@@ -8,10 +8,12 @@ export type ShopifyLoaderOptions = {
     width?: HtmlImageProps['width'] | ImageType['width'];
     height?: HtmlImageProps['height'] | ImageType['height'];
 };
-export type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
+export type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & ImageSrc>;
+type ImageSrc = {
     src: ImageType['url'];
-}>;
-export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
+};
+export type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & ShopifyImageBaseProps;
+type ShopifyImageBaseProps = {
     /** An object with fields that correspond to the Storefront API's
      * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
      * The `data` prop is required.

package/dist/types/MediaFile.d.ts

@@ -11,18 +11,19 @@ export interface MediaFileProps extends BaseProps {
     data: PartialDeep<MediaEdgeType['node'], {
         recurseIntoArrays: true;
     }>;
-    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
-    mediaOptions?: {
-        /** Props that will only apply when an `<Image />` is rendered */
-        image?: Omit<ShopifyImageProps, 'data'>;
-        /** Props that will only apply when a `<Video />` is rendered */
-        video?: Omit<React.ComponentProps<typeof Video>, 'data'>;
-        /** Props that will only apply when an `<ExternalVideo />` is rendered */
-        externalVideo?: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
-        /** Props that will only apply when a `<ModelViewer />` is rendered */
-        modelViewer?: Omit<typeof ModelViewer, 'data'>;
-    };
+    /** The options for the `Image`, `Video`, `ExternalVideo`, or `ModelViewer` components. */
+    mediaOptions?: MediaOptions;
 }
+type MediaOptions = {
+    /** Props that will only apply when an `<Image />` is rendered */
+    image?: Omit<ShopifyImageProps, 'data'>;
+    /** Props that will only apply when a `<Video />` is rendered */
+    video?: Omit<React.ComponentProps<typeof Video>, 'data'>;
+    /** Props that will only apply when an `<ExternalVideo />` is rendered */
+    externalVideo?: Omit<React.ComponentProps<typeof ExternalVideo>['options'], 'data'>;
+    /** Props that will only apply when a `<ModelViewer />` is rendered */
+    modelViewer?: Omit<typeof ModelViewer, 'data'>;
+};
 /**
  * The `MediaFile` component renders the media for the Storefront API's
  * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a

package/dist/types/ModelViewer.d.ts

@@ -1,7 +1,6 @@
 import type { Model3d } from './storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer.js';
-type PropsWeControl = 'src';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -13,7 +12,8 @@ declare global {
 }
 type ModelViewerProps = Omit<PartialDeep<JSX.IntrinsicElements['model-viewer'], {
     recurseIntoArrays: true;
-}>, PropsWeControl> & {
+}>, 'src'> & ModelViewerBaseProps;
+type ModelViewerBaseProps = {
     /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */
     data: PartialDeep<Model3d, {
         recurseIntoArrays: true;

package/dist/types/ProductPrice.d.ts

@@ -2,7 +2,7 @@ import type { Product } from './storefront-api-types.js';
 import { type MoneyProps } from './Money.js';
 import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
-    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<Product, {
         recurseIntoArrays: true;
     }>;

package/dist/types/ProductProvider.d.ts

@@ -2,7 +2,7 @@ import type { SelectedOption as SelectedOptionType, Product, ProductVariant as P
 import type { PartialDeep } from 'type-fest';
 type InitialVariantId = ProductVariantType['id'] | null;
 interface ProductProviderProps {
-    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    /** A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product). */
     data: PartialDeep<Product, {
         recurseIntoArrays: true;
     }>;

package/dist/types/ShopPayButton.d.ts

@@ -1,22 +1,25 @@
-type ShopPayButtonProps = {
+type ShopPayButtonProps = ShopPayButtonStyleProps & (ShopPayVariantIds | ShopPayVariantAndQuantities);
+type ShopPayButtonStyleProps = {
     /** 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'. */
+};
+type ShopPayVariantIds = {
+    /** 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'. */
+};
+type ShopPayVariantAndQuantities = {
+    /** 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 {
@@ -33,10 +36,7 @@ declare global {
  * It relies on the `<ShopProvider>` context provider.
  */
 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 InvalidPropsErrorMessage = "You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]";
 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/types/ShopifyProvider.d.ts

@@ -3,44 +3,36 @@ import type { LanguageCode, CountryCode } from './storefront-api-types.js';
 /**
  * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.
  */
-export declare function ShopifyProvider({ children, shopifyConfig, }: {
-    children: ReactNode;
-    shopifyConfig: ShopifyContextProps;
-}): JSX.Element;
+export declare function ShopifyProvider({ children, ...shopifyConfig }: ShopifyProviderProps): JSX.Element;
 /**
  * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
  */
 export declare function useShop(): ShopifyContextValue;
 /**
- * Shopify-specific values that are used in various Hydrogen-UI components and hooks.
+ * Shopify-specific values that are used in various Hydrogen React components and hooks.
  */
-export type ShopifyContextProps = {
+export type ShopifyProviderProps = {
     /** The globally-unique identifier for the Shop */
     storefrontId?: string;
     /** The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`). */
     storeDomain: string;
     /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
     storefrontToken: string;
-    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */
+    /** The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */
     storefrontApiVersion: string;
-    country?: {
-        /**
-         * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.
-         */
-        isoCode: CountryCode;
-    };
-    language?: {
-        /**
-         * `ISO 369` language codes supported by Shopify.
-         */
-        isoCode: LanguageCode;
-    };
     /**
-     * The locale string based on `country` and `language`.
+     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.
      */
-    locale?: string;
+    countryIsoCode: CountryCode;
+    /**
+     * `ISO 369` language codes supported by Shopify.
+     */
+    languageIsoCode: LanguageCode;
+    /** React children to render. */
+    children?: ReactNode;
 };
-export type ShopifyContextValue = ShopifyContextProps & {
+export type ShopifyContextValue = Omit<ShopifyProviderProps, 'children'> & ShopifyContextReturn;
+type ShopifyContextReturn = {
     /**
      * Creates the fully-qualified URL to your store's GraphQL endpoint.
      *
@@ -49,12 +41,7 @@ export type ShopifyContextValue = ShopifyContextProps & {
      * - `storeDomain`
      * - `storefrontApiVersion`
      */
-    getStorefrontApiUrl: (props?: {
-        /** The host name of the domain (eg: `{shop}.myshopify.com`). */
-        storeDomain?: string;
-        /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */
-        storefrontApiVersion?: string;
-    }) => string;
+    getStorefrontApiUrl: (props?: GetStorefrontApiUrlProps) => string;
     /**
      * Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.
      *
@@ -64,14 +51,7 @@ export type ShopifyContextValue = ShopifyContextProps & {
      * - `storefrontToken`
      *
      */
-    getPublicTokenHeaders: (props: {
-        /**
-         * Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"`
-         */
-        contentType: 'json' | 'graphql';
-        /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
-        storefrontToken?: string;
-    }) => Record<string, string>;
+    getPublicTokenHeaders: (props: GetPublicTokenHeadersProps) => Record<string, string>;
     /**
      * Creates the fully-qualified URL to your myshopify.com domain.
      *
@@ -79,7 +59,23 @@ export type ShopifyContextValue = ShopifyContextProps & {
      *
      * - `storeDomain`
      */
-    getShopifyDomain: (props?: {
-        storeDomain?: string;
-    }) => string;
+    getShopifyDomain: (props?: GetShopifyDomainProps) => string;
+};
+type GetStorefrontApiUrlProps = {
+    /** The host name of the domain (eg: `{shop}.myshopify.com`). */
+    storeDomain?: string;
+    /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */
+    storefrontApiVersion?: string;
+};
+type GetPublicTokenHeadersProps = {
+    /**
+     * Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"`
+     */
+    contentType: 'json' | 'graphql';
+    /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
+    storefrontToken?: string;
+};
+type GetShopifyDomainProps = {
+    storeDomain?: string;
 };
+export {};

package/dist/types/analytics-constants.d.ts

@@ -0,0 +1,48 @@
+export declare const AnalyticsEventName: AnalyticsEventName;
+export declare const AnalyticsPageType: AnalyticsPageType;
+export declare const ShopifySalesChannel: ShopifySalesChannel;
+export declare const ShopifyAppId: {
+    readonly hydrogen: "6167201";
+    readonly headless: "12875497473";
+};
+/**
+ * These duplicated interface declaration is so that we can generate proper documentation
+ * for these public facing constants
+ */
+interface AnalyticsEventName {
+    /** Page view */
+    PAGE_VIEW: 'PAGE_VIEW';
+    /** Add to cart */
+    ADD_TO_CART: 'ADD_TO_CART';
+}
+interface AnalyticsPageType {
+    article: 'article';
+    blog: 'blog';
+    captcha: 'captcha';
+    cart: 'cart';
+    collection: 'collection';
+    customersAccount: 'customers/account';
+    customersActivateAccount: 'customers/activate_account';
+    customersAddresses: 'customers/addresses';
+    customersLogin: 'customers/login';
+    customersOrder: 'customers/order';
+    customersRegister: 'customers/register';
+    customersResetPassword: 'customers/reset_password';
+    giftCard: 'gift_card';
+    home: 'index';
+    listCollections: 'list-collections';
+    forbidden: '403';
+    notFound: '404';
+    page: 'page';
+    password: 'password';
+    product: 'product';
+    policy: 'policy';
+    search: 'search';
+}
+interface ShopifySalesChannel {
+    /** Shopify Hydrogen sales channel */
+    hydrogen: 'hydrogen';
+    /** Shopify Headless sales channel */
+    headless: 'headless';
+}
+export {};

package/dist/types/analytics-schema-custom-storefront-customer-tracking.d.ts

@@ -0,0 +1,3 @@
+import { ShopifyPageViewPayload, ShopifyAddToCartPayload, ShopifyMonorailEvent } from './analytics-types.js';
+export declare function pageView(payload: ShopifyPageViewPayload): ShopifyMonorailEvent[];
+export declare function addToCart(payload: ShopifyAddToCartPayload): ShopifyMonorailEvent[];

package/dist/types/analytics-schema-trekkie-storefront-page-view.d.ts

@@ -0,0 +1,2 @@
+import { ShopifyPageViewPayload, ShopifyMonorailEvent } from './analytics-types.js';
+export declare function pageView(payload: ShopifyPageViewPayload): ShopifyMonorailEvent[];