@shopify/hydrogen 1.0.2 → 1.3.0

package/dist/esnext/components/CartProvider/cart-queries.d.ts

@@ -7,4 +7,4 @@ export declare const CartBuyerIdentityUpdate: (cartFragment: string) => string;
 export declare const CartAttributesUpdate: (cartFragment: string) => string;
 export declare const CartDiscountCodesUpdate: (cartFragment: string) => string;
 export declare const CartQuery: (cartFragment: string) => string;
-export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\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";
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n              id\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\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";

package/dist/esnext/components/CartProvider/cart-queries.js

@@ -154,6 +154,7 @@ fragment CartFragment on Cart {
             product {
               handle
               title
+              id
             }
             selectedOptions {
               name

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

@@ -1,2 +1,2 @@
-import { CartWithActions } from './types';
+import { CartWithActions } from './types.js';
 export declare const CartContext: import("react").Context<CartWithActions | null>;

package/dist/esnext/components/CartProvider/graphql/CartAttributesUpdateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartAttributesUpdateMutationVariables = Types.Exact<{
     attributes: Array<Types.AttributeInput> | Types.AttributeInput;
     cartId: Types.Scalars['ID'];

package/dist/esnext/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartBuyerIdentityUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     buyerIdentity: Types.CartBuyerIdentityInput;

package/dist/esnext/components/CartProvider/graphql/CartCreateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartCreateMutationVariables = Types.Exact<{
     input: Types.CartInput;
     numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;

package/dist/esnext/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartDiscountCodesUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     discountCodes?: Types.InputMaybe<Array<Types.Scalars['String']> | Types.Scalars['String']>;

package/dist/esnext/components/CartProvider/graphql/CartFragment.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartFragmentFragment = {
     __typename?: 'Cart';
 } & Pick<Types.Cart, 'id' | 'checkoutUrl' | 'totalQuantity' | 'note'> & {

package/dist/esnext/components/CartProvider/graphql/CartLineAddMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartLineAddMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.CartLineInput> | Types.CartLineInput;

package/dist/esnext/components/CartProvider/graphql/CartLineRemoveMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartLineRemoveMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.Scalars['ID']> | Types.Scalars['ID'];

package/dist/esnext/components/CartProvider/graphql/CartLineUpdateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartLineUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     lines: Array<Types.CartLineUpdateInput> | Types.CartLineUpdateInput;

package/dist/esnext/components/CartProvider/graphql/CartNoteUpdateMutation.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartNoteUpdateMutationVariables = Types.Exact<{
     cartId: Types.Scalars['ID'];
     note?: Types.InputMaybe<Types.Scalars['String']>;

package/dist/esnext/components/CartProvider/graphql/CartQuery.d.ts

@@ -2,7 +2,7 @@
  * THIS FILE IS AUTO-GENERATED, DO NOT EDIT.
  * Instead, you can edit the associated .graphql file to query for additional fields and this file will be updated when you run `yarn graphql-types`
  */
-import * as Types from '../../../storefront-api-types';
+import * as Types from '../../../storefront-api-types.js';
 export declare type CartQueryQueryVariables = Types.Exact<{
     id: Types.Scalars['ID'];
     numCartLines?: Types.InputMaybe<Types.Scalars['Int']>;

package/dist/esnext/components/CartProvider/hooks.client.d.ts

@@ -1,5 +1,5 @@
-import { CartInput } from '../../storefront-api-types';
-import { Cart } from './types';
+import { CartInput } from '../../storefront-api-types.js';
+import { Cart } from './types.js';
 export declare function useCartFetch(): <T, K>({ query, variables, }: {
     query: string;
     variables: T;

package/dist/esnext/components/CartProvider/hooks.client.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { useShop } from '../../foundation';
-import { flattenConnection } from '../../utilities';
-import { CartCreate, defaultCartFragment } from './cart-queries';
-import { SHOPIFY_STOREFRONT_ID_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER, SHOPIFY_Y, SHOPIFY_S, } from '../../constants';
+import { useShop } from '../../foundation/index.js';
+import { flattenConnection } from '../../utilities/index.js';
+import { CartCreate, defaultCartFragment } from './cart-queries.js';
+import { SHOPIFY_STOREFRONT_ID_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER, SHOPIFY_Y, SHOPIFY_S, } from '../../constants.js';
 import { parse } from 'worktop/cookie';
 export function useCartFetch() {
     const { storeDomain, storefrontApiVersion, storefrontToken, storefrontId } = useShop();

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

@@ -1,4 +1,4 @@
-export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks.client';
-export { useCart } from '../../hooks/useCart';
-export type { State, Status, Cart, CartWithActions, CartAction } from './types';
+export { CartProvider } from './CartProvider.client.js';
+export { useCartFetch, useInstantCheckout } from './hooks.client.js';
+export { useCart } from '../../hooks/useCart/index.js';
+export type { State, Status, Cart, CartWithActions, CartAction, } from './types.js';

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

@@ -1,3 +1,3 @@
-export { CartProvider } from './CartProvider.client';
-export { useCartFetch, useInstantCheckout } from './hooks.client';
-export { useCart } from '../../hooks/useCart';
+export { CartProvider } from './CartProvider.client.js';
+export { useCartFetch, useInstantCheckout } from './hooks.client.js';
+export { useCart } from '../../hooks/useCart/index.js';

package/dist/esnext/components/CartProvider/types.d.ts

@@ -1,5 +1,5 @@
-import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../storefront-api-types';
-import { CartFragmentFragment } from './graphql/CartFragment';
+import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../storefront-api-types.js';
+import { CartFragmentFragment } from './graphql/CartFragment.js';
 export declare type Status = State['status'];
 export interface Cart {
     /** The cart's ID if it has been created through the Storefront API. */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ShopPayButton } from '../ShopPayButton';
+import { ShopPayButton } from '../ShopPayButton/index.js';
 /**
  * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
  * It must be a descendent of a `CartProvider` component.

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { useCart } from '../CartProvider';
-import { ShopPayButton } from '../ShopPayButton';
+import { useCart } from '../CartProvider/index.js';
+import { ShopPayButton } from '../ShopPayButton/index.js';
 /**
  * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
  * It must be a descendent of a `CartProvider` component.

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

@@ -1 +1 @@
-export { CartShopPayButton } from './CartShopPayButton.client';
+export { CartShopPayButton } from './CartShopPayButton.client.js';

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

@@ -1 +1 @@
-export { CartShopPayButton } from './CartShopPayButton.client';
+export { CartShopPayButton } from './CartShopPayButton.client.js';

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

@@ -1,5 +1,5 @@
-import { YouTube, Vimeo } from '../../utilities';
-import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types';
+import { YouTube, Vimeo } from '../../utilities/index.js';
+import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 interface ExternalVideoProps {
     /**

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useEmbeddedVideoUrl } from '../../utilities';
+import { useEmbeddedVideoUrl } from '../../utilities/index.js';
 /**
  * The `ExternalVideo` component renders an embedded video for the Storefront
  * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).

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

@@ -1 +1 @@
-export { ExternalVideo } from './ExternalVideo';
+export { ExternalVideo } from './ExternalVideo.js';

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

@@ -1 +1 @@
-export { ExternalVideo } from './ExternalVideo';
+export { ExternalVideo } from './ExternalVideo.js';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Image as ImageType } from '../../storefront-api-types';
+import type { Image as ImageType } from '../../storefront-api-types.js';
 import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
 declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
 declare type ImageProps<GenericLoaderOpts> = ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>;
@@ -79,7 +79,7 @@ declare type LoaderProps<GenericLoaderOpts> = {
      */
     loaderOptions?: GenericLoaderOpts;
 };
-declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height' | 'alt'> & {
+export declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height' | 'alt'> & {
     /** A custom function that generates the image URL. Parameters passed in
      * are either `ShopifyLoaderParams` if using the `data` prop, or the
      * `LoaderOptions` object that you pass to `loaderOptions`.

package/dist/esnext/components/Image/Image.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, IMG_SRC_SET_SIZES, } from '../../utilities';
+import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, IMG_SRC_SET_SIZES, } from '../../utilities/index.js';
 /**
  * The `Image` component renders an image for the Storefront API's
  * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop, or a custom location by using the `src` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
@@ -27,7 +27,7 @@ export function Image(props) {
         return React.createElement(ExternalImage, { ...props });
     }
 }
-function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, ...rest }) {
+function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, decoding = 'async', ...rest }) {
     if (!data.url) {
         throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
     }
@@ -72,10 +72,10 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             loader,
         });
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset }));
+    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset, decoding: decoding }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, decoding = 'async', ...rest }) {
     if (!width || !height) {
         throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
     }
@@ -112,7 +112,7 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths,
         // @ts-expect-error TS doesn't understand that it could exist
         width: loaderOptions?.width ?? width, 
         // @ts-expect-error TS doesn't understand that it could exist
-        height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset }));
+        height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset, decoding: decoding }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
 function internalImageSrcSet({ src, width, crop, scale, widths, loader, height, }) {

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

@@ -1,2 +1,2 @@
-export { Image } from './Image';
-export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, } from './Image';
+export { Image } from './Image.js';
+export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, ExternalImageProps, } from './Image.js';

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

@@ -1 +1 @@
-export { Image } from './Image';
+export { Image } from './Image.js';

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

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useLocation } from '../../foundation/Router/BrowserRouter.client';
+import { useLocation } from '../../foundation/Router/BrowserRouter.client.js';
 import { createPath } from 'history';
-import { buildPath, useNavigate } from '../../foundation/useNavigate/useNavigate';
-import { RSC_PATHNAME } from '../../constants';
-import { useInternalServerProps } from '../../foundation/useServerProps/use-server-props';
-import { useBasePath } from '../../foundation/useRouteParams/RouteParamsProvider.client';
+import { buildPath, useNavigate, } from '../../foundation/useNavigate/useNavigate.js';
+import { RSC_PATHNAME } from '../../constants.js';
+import { useInternalServerProps } from '../../foundation/useServerProps/use-server-props.js';
+import { useBasePath } from '../../foundation/useRouteParams/RouteParamsProvider.client.js';
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
  * properties available to the `<a>` element are also available to the `Link` component.

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

@@ -1 +1 @@
-export { Link } from './Link.client';
+export { Link } from './Link.client.js';

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

@@ -1 +1 @@
-export { Link } from './Link.client';
+export { Link } from './Link.client.js';

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import type { LocalizationContextValue } from '../../foundation/ShopifyProvider/types';
+import type { LocalizationContextValue } from '../../foundation/ShopifyProvider/types.js';
 export default function LocalizationClientProvider({ localization, children, }: {
     children: ReactNode;
     localization: LocalizationContextValue;

package/dist/esnext/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LocalizationContext } from '../../foundation/ShopifyProvider/ShopifyProvider.client';
+import { LocalizationContext } from '../../foundation/ShopifyProvider/ShopifyProvider.client.js';
 export default function LocalizationClientProvider({ localization, children, }) {
     return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CountryCode, LanguageCode } from '../../storefront-api-types';
+import { CountryCode, LanguageCode } from '../../storefront-api-types.js';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import LocalizationClientProvider from './LocalizationClientProvider.client';
-import { useShop } from '../../foundation/useShop';
-import { useServerRequest } from '../../foundation/ServerRequestProvider';
-import { log } from '../../utilities/log';
-import { getLocalizationContextValue } from '../../foundation/ShopifyProvider/ShopifyProvider.server';
+import LocalizationClientProvider from './LocalizationClientProvider.client.js';
+import { useShop } from '../../foundation/useShop/index.js';
+import { useServerRequest } from '../../foundation/ServerRequestProvider/index.js';
+import { log } from '../../utilities/log/index.js';
+import { getLocalizationContextValue } from '../../foundation/ShopifyProvider/ShopifyProvider.server.js';
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's
  * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field

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

@@ -1 +1 @@
-export { LocalizationProvider } from './LocalizationProvider.server';
+export { LocalizationProvider } from './LocalizationProvider.server.js';

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

@@ -1 +1 @@
-export { LocalizationProvider } from './LocalizationProvider.server';
+export { LocalizationProvider } from './LocalizationProvider.server.js';

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { type ShopifyImageProps } from '../Image';
-import { Video } from '../Video';
-import { ExternalVideo } from '../ExternalVideo';
-import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
+import { type ShopifyImageProps } from '../Image/index.js';
+import { Video } from '../Video/index.js';
+import { ExternalVideo } from '../ExternalVideo/index.js';
+import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export interface MediaFileProps {
     /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */

package/dist/esnext/components/MediaFile/MediaFile.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Image } from '../Image';
-import { Video } from '../Video';
-import { ExternalVideo } from '../ExternalVideo';
-import { ModelViewer } from '../ModelViewer';
+import { Image } from '../Image/index.js';
+import { Video } from '../Video/index.js';
+import { ExternalVideo } from '../ExternalVideo/index.js';
+import { ModelViewer } from '../ModelViewer/index.js';
 /**
  * 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/esnext/components/MediaFile/index.d.ts

@@ -1 +1 @@
-export { MediaFile, MediaFileProps } from './MediaFile';
+export { MediaFile, MediaFileProps } from './MediaFile.js';

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

@@ -1 +1 @@
-export { MediaFile } from './MediaFile';
+export { MediaFile } from './MediaFile.js';

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

@@ -1,6 +1,6 @@
 import { type ElementType } from 'react';
-import type { Props } from '../types';
-import type { Metafield } from '../../storefront-api-types';
+import type { Props } from '../types.js';
+import type { Metafield } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 export interface MetafieldProps<TTag> {
     /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */

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

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
-import { useLocalization } from '../../hooks/useLocalization/useLocalization';
-import { getMeasurementAsString } from '../../utilities/measurement';
-import { Image } from '../Image';
-import { Video } from '../Video';
-import { flattenConnection } from '../../utilities/flattenConnection/index';
-import { parseMetafield } from '../../utilities/parseMetafield/index';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization.js';
+import { getMeasurementAsString } from '../../utilities/measurement.js';
+import { Image } from '../Image/index.js';
+import { Video } from '../Video/index.js';
+import { flattenConnection } from '../../utilities/flattenConnection/index.js';
+import { parseMetafield } from '../../utilities/parseMetafield/index.js';
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).

package/dist/esnext/components/Metafield/components/StarRating/StarRating.d.ts

@@ -1,4 +1,4 @@
-import { Rating } from '../../../../types';
+import { Rating } from '../../../../types.js';
 export declare const STAR_EMPTY = "\u2606";
 export declare const STAR_FILLED = "\u2605";
 export interface StarRatingProps<TTag> {

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

@@ -1 +1 @@
-export { StarRating } from './StarRating';
+export { StarRating } from './StarRating.js';

package/dist/esnext/components/Metafield/components/StarRating/index.js

@@ -1 +1 @@
-export { StarRating } from './StarRating';
+export { StarRating } from './StarRating.js';

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

@@ -1 +1 @@
-export { StarRating } from './StarRating';
+export { StarRating } from './StarRating/index.js';

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

@@ -1 +1 @@
-export { StarRating } from './StarRating';
+export { StarRating } from './StarRating/index.js';

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

@@ -1,2 +1,2 @@
-export { Metafield } from './Metafield.client';
-export type { MetafieldType } from './types';
+export { Metafield } from './Metafield.client.js';
+export type { MetafieldType } from './types.js';

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

@@ -1 +1 @@
-export { Metafield } from './Metafield.client';
+export { Metafield } from './Metafield.client.js';

package/dist/esnext/components/Metafield/types.d.ts

@@ -1,4 +1,4 @@
-import { Metafield } from '../../storefront-api-types';
+import { Metafield } from '../../storefront-api-types.js';
 export declare type MetafieldType = Omit<Partial<Metafield>, 'value'> & {
     value?: string | number | boolean | Date | Record<string, any>;
 };

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

@@ -1,6 +1,6 @@
 import { ReactNode, ElementType } from 'react';
-import { Props } from '../types';
-import type { Model3d } from '../../storefront-api-types';
+import { Props } from '../types.js';
+import type { Model3d } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 interface ModelViewerProps {
     /** Any ReactNode elements. */

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, } from 'react';
-import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client';
+import { useLoadScript } from '../../hooks/useLoadScript/useLoadScript.client.js';
 /**
  * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
  * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).

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

@@ -1 +1 @@
-export { ModelViewer } from './ModelViewer.client';
+export { ModelViewer } from './ModelViewer.client.js';

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

@@ -1 +1 @@
-export { ModelViewer } from './ModelViewer.client';
+export { ModelViewer } from './ModelViewer.client.js';

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

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from 'react';
-import type { MoneyV2, UnitPriceMeasurement } from '../../storefront-api-types';
+import type { MoneyV2, UnitPriceMeasurement } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 interface CustomProps<ComponentGeneric extends React.ElementType> {
     /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMoney } from '../../hooks';
+import { useMoney } from '../../hooks/index.js';
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the

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

@@ -1 +1 @@
-export { Money } from './Money.client';
+export { Money } from './Money.client.js';

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

@@ -1 +1 @@
-export { Money } from './Money.client';
+export { Money } from './Money.client.js';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Product, ProductVariant as ProductVariantType } from '../../storefront-api-types';
+import type { Product, ProductVariant as ProductVariantType } from '../../storefront-api-types.js';
 import type { PartialDeep } from 'type-fest';
 declare type InitialVariantId = ProductVariantType['id'] | null;
 interface ProductOptionsProviderProps {

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

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { ProductOptionsContext } from './context';
-import { getSelectedVariant, getOptions, } from '../../hooks/useProductOptions/helpers';
-import { flattenConnection } from '../../utilities/flattenConnection';
+import { ProductOptionsContext } from './context.js';
+import { getSelectedVariant, getOptions, } from '../../hooks/useProductOptions/helpers.js';
+import { flattenConnection } from '../../utilities/flattenConnection/index.js';
 export function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }) {
     // The flattened variants
     const variants = useMemo(() => flattenConnection(product.variants ?? {}), [product.variants]);

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

@@ -1,2 +1,2 @@
-import type { ProductOptionsHookValue } from '../../hooks';
+import type { ProductOptionsHookValue } from '../../hooks/index.js';
 export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

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

@@ -1 +1 @@
-export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { ProductOptionsProvider } from './ProductOptionsProvider.client.js';

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

@@ -1 +1 @@
-export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { ProductOptionsProvider } from './ProductOptionsProvider.client.js';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Product } from '../../storefront-api-types';
-import { Money } from '../Money';
+import type { Product } from '../../storefront-api-types.js';
+import { Money } from '../Money/index.js';
 import type { PartialDeep } from 'type-fest';
 export interface ProductPriceProps {
     data: PartialDeep<Product>;