@shopify/hydrogen 1.0.1 → 1.2.0

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>;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, } 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.
@@ -34,7 +34,7 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
     if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {
         console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${`Image: ${data.id ?? data.url}`}`);
     }
-    const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions({
+    const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
         data,
         loaderOptions,
         elementProps: {
@@ -42,7 +42,7 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             height,
         },
     });
-    if (__HYDROGEN_DEV__ && (!finalWidth || !finalHeight)) {
+    if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {
         console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${data.id ?? data.url}`}`);
     }
     let finalSrc = data.url;
@@ -50,8 +50,8 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
         finalSrc = loader({
             ...loaderOptions,
             src: data.url,
-            width: finalWidth,
-            height: finalHeight,
+            width: imgElementWidth,
+            height: imgElementHeight,
         });
         if (typeof finalSrc !== 'string' || !finalSrc) {
             throw new Error(`<Image/>: 'loader' did not return a valid string. ${`Image: ${data.id ?? data.url}`}`);
@@ -59,17 +59,20 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
     }
     // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
     // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
-    const maxWidth = width && finalWidth && width < finalWidth ? width : finalWidth;
+    const maxWidth = width && imgElementWidth && width < imgElementWidth
+        ? width
+        : imgElementWidth;
     const finalSrcset = rest.srcSet ??
         internalImageSrcSet({
             ...loaderOptions,
             widths,
             src: data.url,
             width: maxWidth,
+            height: imgElementHeight,
             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: finalWidth ?? undefined, height: finalHeight ?? 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 }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
 function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...rest }) {
@@ -112,23 +115,29 @@ function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths,
         height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
-// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
-const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
-function internalImageSrcSet({ src, width, crop, scale, widths, loader, }) {
+function internalImageSrcSet({ src, width, crop, scale, widths, loader, height, }) {
     const hasCustomWidths = widths && Array.isArray(widths);
-    if (hasCustomWidths && widths.some((size) => isNaN(size)))
+    if (hasCustomWidths && widths.some((size) => isNaN(size))) {
         throw new Error(`<Image/>: the 'widths' must be an array of numbers`);
+    }
+    let aspectRatio = 1;
+    if (width && height) {
+        aspectRatio = Number(height) / Number(width);
+    }
     let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
     if (!hasCustomWidths &&
         width &&
-        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1])
+        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
         setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+    }
     const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
     return setSizes
         .map((size) => `${srcGenerator({
         src,
         width: size,
+        // height is not applied if there is no crop
+        // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
+        height: crop ? Number(size) * aspectRatio : undefined,
         crop,
         scale,
     })} ${size}w`)

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, } 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 { LocalizationContextValue } from './LocalizationContext.client';
+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 './LocalizationContext.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,15 +1,16 @@
 import { ReactNode } from 'react';
+import { CountryCode, LanguageCode } from '../../storefront-api-types.js';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
     /**
      * Override the `isoCode` to define the active country
      */
-    countryCode?: string;
+    countryCode?: CountryCode;
     /**
      * Override the `languageCode` to define the active language
      */
-    languageCode?: string;
+    languageCode?: LanguageCode;
 }
 /**
  * The `LocalizationProvider` component automatically queries the Storefront API's

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

@@ -1,7 +1,9 @@
 import React from 'react';
-import LocalizationClientProvider from './LocalizationClientProvider.client';
-import { useShop } from '../../foundation/useShop';
-import { useServerRequest } from '../../foundation/ServerRequestProvider';
+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
@@ -10,18 +12,12 @@ import { useServerRequest } from '../../foundation/ServerRequestProvider';
  * Any descendents of this provider can use the `useLocalization` hook.
  */
 export function LocalizationProvider(props) {
+    if (import.meta.env.DEV) {
+        log.warn('<LocalizationProvider> is no longer necessary. Pass localization props directly to `<ShopifyProvider>` instead.');
+    }
     const { defaultLanguageCode, defaultCountryCode } = useShop();
-    const languageCode = (props.languageCode ?? defaultLanguageCode).toUpperCase();
-    const countryCode = (props.countryCode ?? defaultCountryCode).toUpperCase();
     const request = useServerRequest();
-    const localization = {
-        country: {
-            isoCode: countryCode,
-        },
-        language: {
-            isoCode: languageCode,
-        },
-    };
+    const localization = getLocalizationContextValue(defaultLanguageCode, defaultCountryCode, props.languageCode, props.countryCode);
     request.ctx.localization = localization;
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }

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 { 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,2 +1 @@
-export { ProductOptionsProvider } from './ProductOptionsProvider.client';
-export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';
+export { ProductOptionsProvider } from './ProductOptionsProvider.client.js';

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

@@ -1,2 +1 @@
-export { ProductOptionsProvider } from './ProductOptionsProvider.client';
-export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.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>;