@shopify/hydrogen 0.1.0

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

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

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

@@ -0,0 +1,5 @@
+import { ProductProviderFragmentFragment } from './ProductProviderFragment';
+export declare type Product = Omit<Partial<ProductProviderFragmentFragment>, 'compareAtPriceRange' | 'priceRange'> & {
+    compareAtPriceRange?: Partial<ProductProviderFragmentFragment['compareAtPriceRange']>;
+    priceRange?: Partial<ProductProviderFragmentFragment['priceRange']>;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export declare function ProductTitle<TTag extends ElementType = 'span'>(props: Props<TTag>): JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+export function ProductTitle(props) {
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    const { as, ...passthroughProps } = props;
+    const Wrapper = as ? as : 'span';
+    return product.title ? (React.createElement(Wrapper, { ...passthroughProps }, product.title)) : null;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface RawHtmlProps {
+    string: string;
+    unsanitized?: boolean;
+}
+export declare function RawHtml<TTag extends ElementType>(props: Props<TTag> & RawHtmlProps): JSX.Element;

package/dist/esnext/components/RawHtml/RawHtml.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export function RawHtml(props) {
+    const { string, unsanitized, as, ...passthroughProps } = props;
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    const sanitizedString = React.useMemo(() => {
+        if (unsanitized || true) {
+            return string;
+        }
+        // TODO: Re-enable when we find a way to support Worker runtime
+        // return DOMPurify.sanitize(text, DOMPURIFY_CONFIG);
+    }, [string, unsanitized]);
+    return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: { __html: sanitizedString } }));
+}

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

@@ -0,0 +1 @@
+export { RawHtml, RawHtmlProps } from './RawHtml';

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AddToCartButtonProps } from '../AddToCartButton';
+import { Props } from '../types';
+declare type PropsWeControl = 'disabled';
+export declare function SelectedVariantAddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & Omit<AddToCartButtonProps, 'variantID'>): JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+import { AddToCartButton as CartButton, } from '../AddToCartButton';
+export function SelectedVariantAddToCartButton(props) {
+    var _a, _b;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a Product context, but none was found');
+    }
+    const { children, quantity, attributes, ...passthroughProps } = props;
+    return (React.createElement(CartButton, { ...passthroughProps, variantID: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', quantity: quantity !== null && quantity !== void 0 ? quantity : 1, disabled: !product.selectedVariant, attributes: attributes }, children));
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { BuyNowButtonProps, BuyNowButtonPropsWeControl } from '../BuyNowButton';
+import { Props } from '../types';
+export declare function SelectedVariantBuyNowButton<TTag extends ElementType = 'button'>(props: Props<TTag, BuyNowButtonPropsWeControl> & Omit<BuyNowButtonProps, 'variantId'>): JSX.Element;

package/dist/esnext/components/SelectedVariantBuyNowButton/SelectedVariantBuyNowButton.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BuyNowButton, } from '../BuyNowButton';
+import { useProduct } from '../ProductProvider';
+export function SelectedVariantBuyNowButton(props) {
+    var _a, _b;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a Product context, but none was found');
+    }
+    const { children, quantity, attributes, ...passthroughProps } = props;
+    return (React.createElement(BuyNowButton, { quantity: quantity !== null && quantity !== void 0 ? quantity : 1, attributes: attributes, variantId: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', disabled: !product.selectedVariant, ...passthroughProps }, children));
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+import { ImageSizeOptions } from '../../utilities';
+export declare function SelectedVariantImage<TTag extends ElementType = 'img'>(props: Props<TTag> & {
+    options?: ImageSizeOptions;
+}): JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+import { Image } from '../Image';
+export function SelectedVariantImage(props) {
+    var _a;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a Product context, but none was found');
+    }
+    const { options, ...passthroughProps } = props;
+    return ((_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.image) ? (React.createElement(Image, { image: product.selectedVariant.image, options: options, ...passthroughProps })) : null;
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface SelectedVariantMetafieldProps {
+    keyName: string;
+    namespace: string;
+}
+export declare function SelectedVariantMetafield<TTag extends ElementType>(props: Props<TTag> & SelectedVariantMetafieldProps): JSX.Element | null;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+import { Metafield } from '../Metafield';
+export function SelectedVariantMetafield(props) {
+    var _a, _b, _c, _d;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a Product context, but none was found');
+    }
+    const { keyName, namespace, ...passthroughProps } = props;
+    const metafield = (_d = (_c = (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.metafields) === null || _b === void 0 ? void 0 : _b.edges) === null || _c === void 0 ? void 0 : _c.find(({ node }) => {
+        return node.namespace === namespace && node.key === keyName;
+    })) === null || _d === void 0 ? void 0 : _d.node;
+    return metafield ? (React.createElement(Metafield, { metafield: metafield, ...passthroughProps })) : null;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export interface SelectedVariantPriceProps {
+    priceType?: 'regular' | 'compareAt';
+}
+export declare function SelectedVariantPrice<TTag extends ElementType>(props: Props<TTag> & SelectedVariantPriceProps): JSX.Element | null;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+import { Money } from '../Money';
+export function SelectedVariantPrice(props) {
+    const product = useProduct();
+    const { priceType = 'regular', ...passthroughProps } = props;
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    const selectedVariant = product.selectedVariant;
+    const price = priceType === 'regular'
+        ? selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.priceV2
+        : selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.compareAtPriceV2;
+    if (price == null) {
+        return null;
+    }
+    return (React.createElement(Money, { ...passthroughProps, money: price }, props.children));
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { ShopPayButtonProps } from '../ShopPayButton';
+export declare function SelectedVariantShopPayButton({ className, }: Omit<ShopPayButtonProps, 'variantIds'>): JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ShopPayButton } from '../ShopPayButton';
+import { useProduct } from '../ProductProvider';
+export function SelectedVariantShopPayButton({ className, }) {
+    var _a;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    const id = (_a = product === null || product === void 0 ? void 0 : product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id;
+    return id ? React.createElement(ShopPayButton, { className: className, variantIds: [id] }) : null;
+}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+export declare function SelectedVariantUnitPrice<TTag extends ElementType>(props: Props<TTag>): JSX.Element | null;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useProduct } from '../ProductProvider';
+import { UnitPrice } from '../UnitPrice';
+export function SelectedVariantUnitPrice(props) {
+    var _a, _b;
+    const product = useProduct();
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    return ((_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.unitPrice) &&
+        ((_b = product.selectedVariant) === null || _b === void 0 ? void 0 : _b.unitPriceMeasurement) ? (React.createElement(UnitPrice, { ...props, unitPrice: product.selectedVariant.unitPrice, unitPriceMeasurement: product.selectedVariant.unitPriceMeasurement })) : null;
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+export interface ShopPayButtonProps {
+    variantIds: string[];
+    className?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'shop-pay-button': {
+                variants: string;
+                'store-url': string;
+            };
+        }
+    }
+}
+export declare function ShopPayButton({ variantIds, className }: ShopPayButtonProps): JSX.Element;

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { useShop } from '../../foundation/ShopifyProvider';
+import { loadScript } from '../../utilities';
+const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.1/client.js';
+export function ShopPayButton({ variantIds, className }) {
+    const [ids, setIds] = useState([]);
+    const [shopPayLoaded, setShopPayLoaded] = useState(false);
+    const { storeDomain } = useShop();
+    useEffect(() => {
+        const ids = variantIds.reduce((accumulator, gid) => {
+            const id = atob(gid).split('/').pop();
+            if (id) {
+                accumulator.push(id);
+            }
+            return accumulator;
+        }, []);
+        setIds(ids);
+    }, [variantIds]);
+    useEffect(() => {
+        async function loadShopPay() {
+            const loaded = await loadScript(URL, {
+                module: true,
+            });
+            if (!loaded) {
+                console.warn('shop-pay-button library did not load');
+            }
+            setShopPayLoaded(true);
+        }
+        loadShopPay();
+    }, []);
+    return (React.createElement("div", { className: className }, shopPayLoaded && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') }))));
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
+export interface UnitPriceProps {
+    unitPrice: MoneyV2;
+    unitPriceMeasurement: UnitPriceMeasurement;
+}
+export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useMoney } from '../../hooks';
+import { Money } from '../Money';
+export function UnitPrice(props) {
+    const { unitPrice, unitPriceMeasurement, children, as, ...passthroughProps } = props;
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    const unitPriceMoneyObject = useMoney(unitPrice);
+    const unitPriceAndMeasurementObject = {
+        ...unitPriceMoneyObject,
+        ...unitPriceMeasurement,
+    };
+    return (React.createElement(Wrapper, { ...passthroughProps }, typeof children === 'function' ? (children(unitPriceAndMeasurementObject)) : (React.createElement(React.Fragment, null,
+        React.createElement(Money, { money: unitPrice }),
+        "/",
+        unitPriceMeasurement.referenceUnit))));
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Props } from '../types';
+import { ImageSizeOptions } from '../../utilities';
+import { Video as VideoType, VideoSource, Image } from '../../graphql/types/types';
+export interface VideoProps {
+    video: {
+        id?: VideoType['id'];
+        previewImage?: Pick<Image, 'originalSrc'>;
+        sources: Pick<VideoSource, 'url' | 'mimeType'>[];
+    };
+    options?: ImageSizeOptions;
+}
+export declare function Video<TTag extends React.ElementType = 'video'>(props: Props<TTag> & VideoProps): JSX.Element;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { useImageUrl } from '../../utilities';
+export function Video(props) {
+    var _a;
+    const { video, options, id = video.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const posterUrl = useImageUrl((_a = video.previewImage) === null || _a === void 0 ? void 0 : _a.originalSrc, options);
+    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, video.sources.map((source) => (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType })))));
+}

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

@@ -0,0 +1,11 @@
+import * as Types from '../../graphql/types/types';
+export declare type VideoFragmentFragment = {
+    __typename?: 'Video';
+} & Pick<Types.Video, 'id'> & {
+    previewImage?: Types.Maybe<{
+        __typename?: 'Image';
+    } & Pick<Types.Image, 'originalSrc'>>;
+    sources: Array<{
+        __typename?: 'VideoSource';
+    } & Pick<Types.VideoSource, 'mimeType' | 'url'>>;
+};

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

@@ -0,0 +1,41 @@
+export { Link } from 'react-router-dom';
+export * from './MediaFile';
+export * from './Video';
+export * from './Image';
+export * from './ExternalVideo';
+export * from './RawHtml';
+export * from './AddToCartButton';
+export * from './Model3D';
+export * from './Money';
+export * from './CartUIProvider';
+export * from './CartToggle';
+export * from './CartLineProvider';
+export * from './CartLineImage';
+export * from './CartLinePrice';
+export * from './CartLineProductTitle';
+export * from './CartLineQuantity';
+export * from './CartLineQuantityAdjustButton';
+export * from './CartLineAttributes';
+export * from './CartLines';
+export * from './CartContainer';
+export * from './CartCheckoutButton';
+export * from './CartShopPayButton';
+export * from './CartTotal';
+export * from './Metafield';
+export * from './ProductProvider';
+export * from './ProductDescription';
+export * from './ProductTitle';
+export * from './ProductPrice';
+export * from './ProductMetafield';
+export * from './SelectedVariantPrice';
+export * from './SelectedVariantAddToCartButton';
+export * from './SelectedVariantBuyNowButton';
+export * from './SelectedVariantShopPayButton';
+export * from './SelectedVariantUnitPrice';
+export * from './SelectedVariantImage';
+export * from './SelectedVariantMetafield';
+export * from './BuyNowButton';
+export * from './ShopPayButton';
+export * from './CartProvider';
+export declare const Product: Function & Record<string, any>;
+export declare const CartLine: Function & Record<string, any>;

package/dist/esnext/components/index.js

@@ -0,0 +1,87 @@
+export { Link } from 'react-router-dom';
+export * from './MediaFile';
+export * from './Video';
+export * from './Image';
+export * from './ExternalVideo';
+export * from './RawHtml';
+export * from './AddToCartButton';
+export * from './Model3D';
+export * from './Money';
+export * from './CartUIProvider';
+export * from './CartToggle';
+export * from './CartLineProvider';
+export * from './CartLineImage';
+export * from './CartLinePrice';
+export * from './CartLineProductTitle';
+export * from './CartLineQuantity';
+export * from './CartLineQuantityAdjustButton';
+export * from './CartLineAttributes';
+export * from './CartLines';
+export * from './CartContainer';
+export * from './CartCheckoutButton';
+export * from './CartShopPayButton';
+export * from './CartTotal';
+export * from './Metafield';
+export * from './ProductProvider';
+export * from './ProductDescription';
+export * from './ProductTitle';
+export * from './ProductPrice';
+export * from './ProductMetafield';
+export * from './SelectedVariantPrice';
+export * from './SelectedVariantAddToCartButton';
+export * from './SelectedVariantBuyNowButton';
+export * from './SelectedVariantShopPayButton';
+export * from './SelectedVariantUnitPrice';
+export * from './SelectedVariantImage';
+export * from './SelectedVariantMetafield';
+export * from './BuyNowButton';
+export * from './ShopPayButton';
+export * from './CartProvider';
+/**
+ * Provide namespaced aliases for the `Product` group.
+ */
+import { ProductProvider } from './ProductProvider';
+import { ProductPrice } from './ProductPrice';
+import { ProductDescription } from './ProductDescription';
+import { ProductTitle } from './ProductTitle';
+import { ProductMetafield } from './ProductMetafield';
+import { SelectedVariantAddToCartButton } from './SelectedVariantAddToCartButton';
+import { SelectedVariantBuyNowButton } from './SelectedVariantBuyNowButton';
+import { SelectedVariantShopPayButton } from './SelectedVariantShopPayButton';
+import { SelectedVariantImage } from './SelectedVariantImage';
+import { SelectedVariantPrice } from './SelectedVariantPrice';
+import { SelectedVariantUnitPrice } from './SelectedVariantUnitPrice';
+import { SelectedVariantMetafield } from './SelectedVariantMetafield';
+export const Product = ProductProvider;
+Product.Description = ProductDescription;
+Product.Price = ProductPrice;
+Product.Title = ProductTitle;
+Product.Metafield = ProductMetafield;
+Product.SelectedVariant = {
+    AddToCartButton: SelectedVariantAddToCartButton,
+    BuyNowButton: SelectedVariantBuyNowButton,
+    ShopPayButton: SelectedVariantShopPayButton,
+    Price: SelectedVariantPrice,
+    Image: SelectedVariantImage,
+    UnitPrice: SelectedVariantUnitPrice,
+    Metafield: SelectedVariantMetafield,
+};
+/**
+ * Provide namespaced aliases for the `CartLine` group.
+ */
+import { CartLineProvider } from './CartLineProvider';
+import { CartLineImage } from './CartLineImage';
+import { CartLinePrice } from './CartLinePrice';
+import { CartLineProductTitle } from './CartLineProductTitle';
+import { CartLineQuantity } from './CartLineQuantity';
+import { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+import { CartLineSelectedOptions } from './CartLineSelectedOptions';
+import { CartLineAttributes } from './CartLineAttributes';
+export const CartLine = CartLineProvider;
+CartLine.Image = CartLineImage;
+CartLine.Price = CartLinePrice;
+CartLine.ProductTitle = CartLineProductTitle;
+CartLine.Quantity = CartLineQuantity;
+CartLine.QuantityAdjustButton = CartLineQuantityAdjustButton;
+CartLine.SelectedOptions = CartLineSelectedOptions;
+CartLine.Attributes = CartLineAttributes;

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

@@ -0,0 +1,73 @@
+import { ReactNode, ElementType, ComponentProps, ReactElement } from 'react';
+/**
+ * Inspired by HeadlessUI
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/@headlessui-react/src/types.ts#L11-L13
+ */
+/**
+ * Used as a default value for TOmitableProps. Actual values will be element props
+ * we control e.g. `value` which we don't want developers to set on a component.
+ */
+declare const __: "__";
+declare type __ = typeof __;
+/**
+ * This helper type pulls the ComponentProps from a given `TTag` element. This is
+ * nice because it smartly pulls props from native HTML elements in addition to
+ * React components.
+ */
+declare type PropsOf<TTag = any> = TTag extends ElementType ? ComponentProps<TTag> : never;
+/**
+ * This is a "global" list of props we are always going to control, meaning
+ * we'll omit the original prop definition if it exists.
+ */
+declare type PropsWeControl = 'as' | 'children';
+/**
+ * This is the "global" list of our props, similar to above. It is applied to
+ * every component using `Props`.
+ */
+declare type OurProps<TTag> = {
+    as?: TTag;
+    children?: ReactNode;
+};
+declare type CleanProps<TTag, TOmitableProps extends keyof any = __> = TOmitableProps extends __ ? Omit<PropsOf<TTag>, PropsWeControl> : Omit<PropsOf<TTag>, TOmitableProps | PropsWeControl>;
+/**
+ * Props is a helper type which allows us to combine the base props of a given element `TTag`, combine "global" `OurProps`,
+ * and Omit props that we do not allow for the given component.
+ *
+ * ## How to use Props
+ *
+ * Think of it like a function!
+ * - The first arg, `TTag`, should extend `React.ElementType` and it might default to a native HTML element,
+ * like `input`.
+ * - The second arg, `TOmittableProps`, is optional. It is a string or union of strings that represent props
+ * that you do NOT allow in your component, because you overwrite them and control them yourself. One example
+ * of this is an `onClick` handler for e.g. a button.
+ *
+ * You can combine `Props` with your own type definition with & to define props for your component.
+ *
+ * Example:
+ *
+ * ```
+ * type MyProps = {
+ *   customThing: string
+ * }
+ *
+ * type PropsWeControl = 'onClick'
+ *
+ * export function MyButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & MyProps) {
+ *   const {customThing, children, ...passthroughProps} = props;
+ *
+ *   return <button {...passthroughProps} onClick={() => {}}>{children}</button>
+ * }
+ * ```
+ *
+ */
+export declare type Props<TTag, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & OurProps<TTag>;
+/**
+ * While similar to `Props`, this props an additional second argument `TSlot` which represents the interface
+ * of the object passed to the callback via render props. Useful for headless components that expect render props.
+ */
+export declare type PropsWithSlot<TTag, TSlot = any, TOmitableProps extends keyof any = __> = CleanProps<TTag, TOmitableProps> & {
+    children?: ReactNode | ((props: TSlot) => ReactElement);
+    as?: TTag;
+};
+export {};

package/dist/esnext/components/types.js

@@ -0,0 +1,10 @@
+/**
+ * Inspired by HeadlessUI
+ * @see https://github.com/tailwindlabs/headlessui/blob/6a01c54b15bc0291af737dfc2a225dca88f3fa55/packages/@headlessui-react/src/types.ts#L11-L13
+ */
+/**
+ * Used as a default value for TOmitableProps. Actual values will be element props
+ * we control e.g. `value` which we don't want developers to set on a component.
+ */
+const __ = '__';
+export {};