@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useLocation } from '../../foundation/Router/BrowserRouter.client';
+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';
+/**
+ * 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.
+ * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
+ */
+export const Link = React.forwardRef(function Link(props, ref) {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [_, startTransition] = React.useTransition();
+    const routeBasePath = useBasePath();
+    /**
+     * Inspired by Remix's Link component
+     */
+    const [shouldPrefetch, setShouldPrefetch] = useState(false);
+    const [maybePrefetch, setMaybePrefetch] = useState(false);
+    const { reloadDocument, target, replace: _replace, onClick, clientState, prefetch = true, scroll = true, } = props;
+    const to = buildPath(props.basePath ?? routeBasePath, props.to);
+    const internalClick = useCallback((e) => {
+        if (onClick)
+            onClick(e);
+        if (!reloadDocument && // do regular browser stuff
+            e.button === 0 && // Ignore everything but left clicks
+            (!target || target === '_self') && // Let browser handle "target=_blank"
+            !isModifiedEvent(e) // Ignore modifier key clicks
+        ) {
+            e.preventDefault();
+            // If the URL hasn't changed, the regular <a> will do a replace
+            const replace = !!_replace || createPath(location) === createPath({ pathname: to });
+            navigate(to, {
+                replace,
+                scroll,
+                clientState,
+                basePath: '/', // path was already resolved with the base
+            });
+        }
+    }, [
+        onClick,
+        reloadDocument,
+        target,
+        _replace,
+        location,
+        to,
+        navigate,
+        clientState,
+        scroll,
+    ]);
+    const signalPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch && !!to) {
+                setMaybePrefetch(true);
+            }
+        });
+    };
+    const cancelPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(false);
+            }
+        });
+    };
+    /**
+     * Wrapping `maybePrefetch` inside useEffect allows the user to quickly graze over
+     * a link without triggering a prefetch.
+     */
+    useEffect(() => {
+        if (maybePrefetch) {
+            const id = setTimeout(() => {
+                setShouldPrefetch(true);
+            }, 100);
+            return () => {
+                clearTimeout(id);
+            };
+        }
+    }, [maybePrefetch]);
+    const onMouseEnter = composeEventHandlers(props.onMouseEnter, signalPrefetchIntent);
+    const onMouseLeave = composeEventHandlers(props.onMouseLeave, cancelPrefetchIntent);
+    const onFocus = composeEventHandlers(props.onFocus, signalPrefetchIntent);
+    const onBlur = composeEventHandlers(props.onBlur, cancelPrefetchIntent);
+    const onTouchStart = composeEventHandlers(props.onTouchStart, signalPrefetchIntent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { ...without(props, [
+                'to',
+                'replace',
+                'clientState',
+                'reloadDocument',
+                'prefetch',
+                'scroll',
+            ]), ref: ref, rel: props.rel ??
+                (to.startsWith('http') || to.startsWith('//')
+                    ? 'noreferrer noopener'
+                    : undefined), onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: to }, props.children),
+        shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
+});
+function Prefetch({ pathname }) {
+    const { getProposedLocationServerProps } = useInternalServerProps();
+    const location = useLocation();
+    const newPath = createPath({ pathname });
+    if (pathname.startsWith('http') || newPath === createPath(location)) {
+        return null;
+    }
+    const newLocation = new URL(newPath, window.location.href);
+    const proposedServerState = getProposedLocationServerProps({
+        pathname: newLocation.pathname,
+        search: newLocation.search,
+    });
+    const href = `${RSC_PATHNAME}?state=` +
+        encodeURIComponent(JSON.stringify(proposedServerState));
+    return React.createElement("link", { rel: "prefetch", as: "fetch", href: href });
+}
+/**
+ * Credit: Remix's <Link> component.
+ */
+export function composeEventHandlers(theirHandler, ourHandler) {
+    return (event) => {
+        theirHandler?.(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
+function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function without(obj, props) {
+    const newObj = {};
+    for (const key of Object.keys(obj)) {
+        if (!props.includes(key)) {
+            newObj[key] = obj[key];
+        }
+    }
+    return newObj;
+}

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Localization } from './LocalizationContext.client';
+import { LocalizationContextValue } from './LocalizationContext.client';
 export default function LocalizationClientProvider({ localization, children, }: {
     children: ReactNode;
-    localization: Localization;
+    localization: LocalizationContextValue;
 }): JSX.Element;

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

@@ -1,14 +1,5 @@
-import React, { useMemo, useState } from 'react';
-import { LocalizationContext } from './LocalizationContext.client';
+import React from 'react';
+import { LocalizationContext, } from './LocalizationContext.client';
 export default function LocalizationClientProvider({ localization, children, }) {
-    const [country, setCountry] = useState(localization.country);
-    const [availableCountries] = useState(localization.availableCountries);
-    const contextValue = useMemo(() => {
-        return {
-            country,
-            setCountry,
-            availableCountries,
-        };
-    }, [country, availableCountries, setCountry]);
-    return (React.createElement(LocalizationContext.Provider, { value: contextValue }, children));
+    return (React.createElement(LocalizationContext.Provider, { value: localization }, children));
 }

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

@@ -1,8 +1,9 @@
-import { LocalizationQuery } from './LocalizationQuery';
-export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
-    country?: Localization['country'];
-    availableCountries: Localization['availableCountries'];
-    setCountry: React.Dispatch<React.SetStateAction<Localization['country']>>;
+    country: {
+        isoCode: string;
+    };
+    language: {
+        isoCode: string;
+    };
 }
 export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

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

@@ -1,4 +1,21 @@
 import { ReactNode } from 'react';
-export declare function LocalizationProvider({ children }: {
+export interface LocalizationProviderProps {
+    /** A `ReactNode` element. */
     children: ReactNode;
-}): JSX.Element;
+    /**
+     * Override the `isoCode` to define the active country
+     */
+    countryCode?: string;
+    /**
+     * Override the `languageCode` to define the active language
+     */
+    languageCode?: string;
+}
+/**
+ * The `LocalizationProvider` component automatically queries the Storefront API's
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
+ *
+ * Any descendents of this provider can use the `useLocalization` hook.
+ */
+export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;

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

@@ -1,8 +1,27 @@
 import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
-import { useShopQuery } from '../../hooks/useShopQuery';
-import { Localization } from '../../graphql/graphql-constants';
-export function LocalizationProvider({ children }) {
-    const { data: { localization }, } = useShopQuery({ query: Localization });
-    return (React.createElement(LocalizationClientProvider, { localization: localization }, children));
+import { useShop } from '../../foundation/useShop';
+import { useServerRequest } from '../../foundation/ServerRequestProvider';
+/**
+ * The `LocalizationProvider` component automatically queries the Storefront API's
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
+ *
+ * Any descendents of this provider can use the `useLocalization` hook.
+ */
+export function LocalizationProvider(props) {
+    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,
+        },
+    };
+    request.ctx.localization = localization;
+    return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }

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

@@ -1,2 +1 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
-export { useCountry, useAvailableCountries } from './hooks';

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

@@ -1,2 +1 @@
 export { LocalizationProvider } from './LocalizationProvider.server';
-export { useCountry, useAvailableCountries } from './hooks';

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

@@ -1,19 +1,19 @@
-import { ImageProps } from '../Image';
-import { VideoProps } from '../Video';
-import { ExternalVideoProps } from '../ExternalVideo';
-import { Model3DProps } from '../Model3D';
-import { Media as MediaType } from '../../graphql/types/types';
-export declare type Media = Pick<MediaType, 'mediaContentType'>;
-declare type ImageMedia = Media & ImageProps;
-declare type Model3DMedia = Media & Model3DProps['model'];
-declare type ExternalVideoMedia = Media & ExternalVideoProps['video'];
-declare type VideoMedia = Media & VideoProps['video'];
-export interface Props {
-    media: ImageMedia | Model3DMedia | ExternalVideoMedia | VideoMedia;
-    options?: ImageProps['options'] | VideoProps['options'] | ExternalVideoProps['options'];
+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 { 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). */
+    data: PartialDeep<MediaEdgeType['node']>;
+    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
+    options?: ShopifyImageProps | React.ComponentProps<typeof Video>['previewImageOptions'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }
-export declare function MediaFile({ media, options, ...passthroughProps }: Props): JSX.Element | null;
-export declare namespace MediaFile {
-    var Fragment: string;
-}
-export {};
+/**
+ * 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
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
+ * `media` provided as a prop.
+ */
+export declare function MediaFile({ data, options, ...passthroughProps }: MediaFileProps): JSX.Element | null;

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

@@ -1,22 +1,32 @@
-import * as React from 'react';
+import React from 'react';
 import { Image } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
-import { Model3D } from '../Model3D';
-import { MediaFileFragment } from '../../graphql/graphql-constants';
-export function MediaFile({ media, options, ...passthroughProps }) {
-    switch (media.mediaContentType) {
+import { ModelViewer } from '../ModelViewer';
+/**
+ * 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
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
+ * `media` provided as a prop.
+ */
+export function MediaFile({ data, options, ...passthroughProps }) {
+    switch (data.mediaContentType) {
         case 'IMAGE': {
-            return (React.createElement(Image, { ...passthroughProps, image: media.image, options: options }));
+            const dataImage = data
+                .image;
+            if (!dataImage || !dataImage.url) {
+                console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
+                return null;
+            }
+            return (React.createElement(Image, { ...passthroughProps, data: dataImage, loaderOptions: options }));
         }
         case 'VIDEO':
-            return (React.createElement(Video, { ...passthroughProps, video: media, options: options }));
+            return (React.createElement(Video, { ...passthroughProps, data: data, previewImageOptions: options }));
         case 'EXTERNAL_VIDEO':
-            return (React.createElement(ExternalVideo, { ...passthroughProps, video: media, options: options }));
+            return (React.createElement(ExternalVideo, { ...passthroughProps, data: data, options: options }));
         case 'MODEL_3D':
-            return React.createElement(Model3D, { ...passthroughProps, model: media });
+            return (React.createElement(ModelViewer, { ...passthroughProps, data: data }));
         default:
             return null;
     }
 }
-MediaFile.Fragment = MediaFileFragment;

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

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

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

@@ -1,8 +1,17 @@
-import { ElementType, ReactElement } from 'react';
-import { Props } from '../types';
-import { ParsedMetafield } from '../../types';
-export interface MetafieldProps {
-    metafield: ParsedMetafield;
-    children?: (value: ParsedMetafield) => ReactElement;
+import { type ElementType } from 'react';
+import type { Props } from '../types';
+import type { Metafield } from '../../storefront-api-types';
+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). */
+    data: PartialDeep<Metafield> | null;
+    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */
+    as?: TTag;
 }
-export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps): JSX.Element | null;
+/**
+ * The `Metafield` component renders the value of a Storefront
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
+ *
+ * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
+ */
+export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;

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

@@ -1,50 +1,104 @@
-import React from 'react';
-import { useShop } from '../../foundation';
-import { getMeasurementAsString } from '../../utilities';
-import { StarRating } from './components/StarRating';
-import { RawHtml } from '../RawHtml';
+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';
+/**
+ * The `Metafield` component renders the value of a Storefront
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
+ *
+ * Renders a smart default of the Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
+ */
 export function Metafield(props) {
-    const { metafield, children, as, ...passthroughProps } = props;
-    const { locale } = useShop();
-    if (metafield.value == null) {
-        console.warn(`No metafield value for ${metafield}`);
+    const { data, children, as, ...passthroughProps } = props;
+    const { locale } = useLocalization();
+    const parsedMetafield = useMemo(() => parseMetafield(data), [data]);
+    if (!parsedMetafield) {
+        if (__HYDROGEN_DEV__) {
+            console.warn(`<Metafield/>: nothing was passed to the data prop 'data'`);
+        }
         return null;
     }
-    if (typeof children === 'function') {
-        return children(metafield);
+    if (parsedMetafield.value === null || parsedMetafield.value === undefined) {
+        if (__HYDROGEN_DEV__) {
+            console.warn(`<Metafield/>: No metafield value for metafield ${parsedMetafield.id ?? parsedMetafield.key}`);
+        }
+        return null;
     }
-    switch (metafield.type) {
+    switch (parsedMetafield.type) {
         case 'date': {
-            const Wrapper = as !== null && as !== void 0 ? as : 'time';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toLocaleDateString(locale)));
+            const Wrapper = as ?? 'time';
+            return (React.createElement(Wrapper, { ...passthroughProps }, parsedMetafield.value.toLocaleDateString(locale)));
         }
         case 'date_time': {
-            const Wrapper = as !== null && as !== void 0 ? as : 'time';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toLocaleString(locale)));
+            const Wrapper = as ?? 'time';
+            return (React.createElement(Wrapper, { ...passthroughProps }, parsedMetafield.value.toLocaleString(locale)));
         }
         case 'weight':
         case 'dimension':
         case 'volume': {
-            const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, getMeasurementAsString(metafield.value, locale)));
+            const Wrapper = as ?? 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, getMeasurementAsString(parsedMetafield.value, locale)));
         }
         case 'rating': {
-            return (React.createElement(StarRating, { rating: metafield.value, ...passthroughProps }));
+            const Wrapper = as ?? 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, parsedMetafield.value.value));
         }
         case 'single_line_text_field': {
-            return (React.createElement(RawHtml, { ...passthroughProps, as: as !== null && as !== void 0 ? as : 'span', string: metafield.value }));
+            const Wrapper = as ?? 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: { __html: parsedMetafield.value } }));
         }
         case 'multi_line_text_field': {
-            return (React.createElement(RawHtml, { ...passthroughProps, as: as, string: metafield.value.split('\n').join('<br/>') }));
+            const Wrapper = as ?? 'div';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: {
+                    __html: parsedMetafield.value.split('\n').join('<br/>'),
+                } }));
+        }
+        case 'url': {
+            const protocolLessUrl = new URL(parsedMetafield.value);
+            return (React.createElement("a", { href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ''), ...passthroughProps }, parsedMetafield.value));
+        }
+        case 'json': {
+            const Wrapper = as ?? 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(parsedMetafield.value)));
+        }
+        case 'product_reference':
+        case 'variant_reference':
+        case 'page_reference': {
+            const Wrapper = as ?? 'span';
+            const ref = parsedMetafield.reference;
+            return (React.createElement(Wrapper, { ...passthroughProps }, ref?.title ?? ref?.id ?? ''));
+        }
+        case 'list.single_line_text_field': {
+            const Wrapper = as ?? 'ul';
+            // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error because I believe 'list.single_line_text_field' will also only be availabe in the same setting and we also handle if it doesn't exist
+            const refArray = parsedMetafield.references
+                ? // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error
+                    flattenConnection(parsedMetafield.references)
+                : [];
+            return (React.createElement(Wrapper, { ...passthroughProps }, refArray.map((ref, index) => (
+            // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key
+            // eslint-disable-next-line react/no-array-index-key
+            React.createElement("li", { key: `${ref ?? ''}-${index}` }, ref)))));
         }
-        case 'url':
-            return (React.createElement("a", { href: metafield.value, ...passthroughProps }, metafield.value));
-        case 'json':
-            const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(metafield.value)));
-        default: {
-            const Wrapper = as !== null && as !== void 0 ? as : 'span';
-            return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toString()));
+        case 'file_reference': {
+            if (parsedMetafield.reference?.__typename === 'MediaImage') {
+                const ref = parsedMetafield.reference;
+                return ref.image ? (React.createElement(Image, { data: ref.image, ...passthroughProps })) : null;
+            }
+            else if (parsedMetafield.reference?.__typename === 'GenericFile') {
+                const ref = parsedMetafield.reference;
+                return ref.previewImage ? (React.createElement("a", { href: parsedMetafield.reference?.url ?? '', ...passthroughProps },
+                    React.createElement(Image, { data: ref.previewImage }))) : null;
+            }
+            else if (parsedMetafield.reference?.__typename === 'Video') {
+                const ref = parsedMetafield.reference;
+                return React.createElement(Video, { ...passthroughProps, data: ref });
+            }
         }
     }
+    const Wrapper = as ?? 'span';
+    return (React.createElement(Wrapper, { ...passthroughProps }, parsedMetafield.value?.toString()));
 }

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

@@ -1,12 +1,12 @@
-import { ElementType } from 'react';
-import { Props } from '../../../types';
 import { Rating } from '../../../../types';
 export declare const STAR_EMPTY = "\u2606";
 export declare const STAR_FILLED = "\u2605";
-export interface StarRatingProps {
+export interface StarRatingProps<TTag> {
     rating: Rating;
+    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
+    as?: TTag;
 }
-export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps): JSX.Element;
+export declare function StarRating<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & StarRatingProps<TTag>): JSX.Element;
 export declare function Star({ percentFilled }: {
-    percentFilled: Number;
+    percentFilled: number;
 }): JSX.Element;

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

@@ -22,7 +22,7 @@ export function StarRating(props) {
         }
         return stars;
     }, [rating.scale_min, rating.scale_max, rating.value]);
-    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    const Wrapper = as ?? 'div';
     return React.createElement(Wrapper, { ...passthroughProps }, starsArray);
 }
 export function Star({ percentFilled }) {

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

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

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

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