@shopify/hydrogen-react 0.0.0-next-32f1381 → 0.0.0-next-992334e

package/dist/{node-dev/ProductPrice.cjs.map → browser-prod/ProductPrice.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ProductPrice.cjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange","Money"],"mappings":";;;;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,uBAAAA,mBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,0CACGe,MAAAA,OAAD;AAAA,MAAA,GAAWlB;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,wCAAQgB,MAAAA,OAAD;AAAA,IAAA,GAAWlB;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;;"}
+{"version":3,"file":"ProductPrice.mjs","sources":["../../src/ProductPrice.tsx"],"sourcesContent":["import type {\n  MoneyV2,\n  UnitPriceMeasurement,\n  Product,\n} from './storefront-api-types.js';\nimport {Money, type MoneyProps} from './Money.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nexport interface ProductPriceProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values: `regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n  /** The type of value. Valid values: `min` (default), `max` or `unit`. */\n  valueType?: 'max' | 'min' | 'unit';\n  /** The ID of the variant. */\n  variantId?: string;\n}\n\n/**\n * The `ProductPrice` component renders a `Money` component with the product\n * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.\n */\nexport function ProductPrice<ComponentGeneric extends React.ElementType>(\n  props: ProductPriceProps &\n    Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>\n) {\n  const {\n    priceType = 'regular',\n    variantId,\n    valueType = 'min',\n    data: product,\n    ...passthroughProps\n  } = props;\n\n  if (product == null) {\n    throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);\n  }\n\n  let price: Partial<MoneyV2> | undefined | null;\n  let measurement: Partial<UnitPriceMeasurement> | undefined | null;\n\n  const variant = variantId\n    ? flattenConnection(product?.variants ?? {}).find(\n        (variant) => variant?.id === variantId\n      ) ?? null\n    : null;\n\n  if (priceType === 'compareAt') {\n    if (variantId && variant) {\n      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {\n        return null;\n      }\n      price = variant.compareAtPriceV2;\n    } else if (valueType === 'max') {\n      price = product?.compareAtPriceRange?.maxVariantPrice;\n    } else {\n      price = product?.compareAtPriceRange?.minVariantPrice;\n    }\n  } else {\n    if (variantId && variant) {\n      price = variant.priceV2;\n      if (valueType === 'unit') {\n        price = variant.unitPrice;\n        measurement = variant.unitPriceMeasurement;\n      }\n    } else if (valueType === 'max') {\n      price = product.priceRange?.maxVariantPrice;\n    } else {\n      price = product.priceRange?.minVariantPrice;\n    }\n  }\n\n  if (!price) {\n    return null;\n  }\n\n  if (measurement) {\n    return (\n      <Money {...passthroughProps} data={price} measurement={measurement} />\n    );\n  }\n\n  return <Money {...passthroughProps} data={price} />;\n}\n"],"names":["ProductPrice","props","priceType","variantId","valueType","data","product","passthroughProps","Error","price","measurement","variant","flattenConnection","variants","find","id","compareAtPriceV2","amount","priceV2","compareAtPriceRange","maxVariantPrice","minVariantPrice","unitPrice","unitPriceMeasurement","priceRange"],"mappings":";;;AAwBO,SAASA,aACdC,OAEA;;AACM,QAAA;AAAA,IACJC,YAAY;AAAA,IACZC;AAAAA,IACAC,YAAY;AAAA,IACZC,MAAMC;AAAAA,OACHC;AAAAA,EACDN,IAAAA;AAEJ,MAAIK,WAAW,MAAM;AACb,UAAA,IAAIE,MAAO,uDAAX;AAAA,EACP;AAEGC,MAAAA;AACAC,MAAAA;AAEJ,QAAMC,UAAUR,aACZS,wBAAkBN,wCAASO,aAATP,YAAqB,CAAA,CAAtB,EAA0BQ,KACxCH,CAAAA,cAAYA,qCAASI,QAAOZ,SAD/B,MAAAS,YAEK,OACL;AAEJ,MAAIV,cAAc,aAAa;AAC7B,QAAIC,aAAaQ,SAAS;AACxB,YAAIA,aAAQK,qBAARL,mBAA0BM,cAAWN,aAAQO,YAARP,mBAAiBM,SAAQ;AACzD,eAAA;AAAA,MACR;AACDR,cAAQE,QAAQK;AAAAA,IAAAA,WACPZ,cAAc,OAAO;AAC9BK,eAAQH,wCAASa,wBAATb,mBAA8Bc;AAAAA,IAAAA,OACjC;AACLX,eAAQH,wCAASa,wBAATb,mBAA8Be;AAAAA,IACvC;AAAA,EAAA,OACI;AACL,QAAIlB,aAAaQ,SAAS;AACxBF,cAAQE,QAAQO;AAChB,UAAId,cAAc,QAAQ;AACxBK,gBAAQE,QAAQW;AAChBZ,sBAAcC,QAAQY;AAAAA,MACvB;AAAA,IAAA,WACQnB,cAAc,OAAO;AAC9BK,eAAQH,aAAQkB,eAARlB,mBAAoBc;AAAAA,IAAAA,OACvB;AACLX,eAAQH,aAAQkB,eAARlB,mBAAoBe;AAAAA,IAC7B;AAAA,EACF;AAED,MAAI,CAACZ,OAAO;AACH,WAAA;AAAA,EACR;AAED,MAAIC,aAAa;AACf,+BACG,OAAD;AAAA,MAAA,GAAWH;AAAAA,MAAkB,MAAME;AAAAA,MAAO;AAAA,IAAA,CAD5C;AAAA,EAGD;AAED,6BAAQ,OAAD;AAAA,IAAA,GAAWF;AAAAA,IAAkB,MAAME;AAAAA,EAAAA,CAA1C;AACD;"}

package/dist/browser-prod/{ProductProvider.js → ProductProvider.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useMemo, useState, useEffect, useCallback, useContext } from "react";
-import { flattenConnection } from "./flatten-connection.js";
+import { flattenConnection } from "./flatten-connection.mjs";
 import { jsx } from "react/jsx-runtime";
 const ProductOptionsContext = createContext(null);
 function ProductProvider({
@@ -158,4 +158,4 @@ export {
   ProductProvider,
   useProduct
 };
-//# sourceMappingURL=ProductProvider.js.map
+//# sourceMappingURL=ProductProvider.mjs.map

package/dist/{node-prod/ProductProvider.cjs.map → browser-prod/ProductProvider.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ProductProvider.cjs","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps) {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants]\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant)\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants]\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants]\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        })\n      ),\n    [product.sellingPlanGroups]\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      isOptionInStock,\n      options,\n      product.sellingPlanGroups,\n      product.variants,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ]\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct() {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[]\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >\n) {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {}\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype ProductHookValue = PartialDeep<\n  {\n    /** An array of the variant `nodes` from the `VariantConnection`. */\n    variants: ProductVariantType[];\n    variantsConnection?: ProductVariantConnection;\n    /** An array of the product's options and values. */\n    options: OptionWithValues[];\n    /** The selected variant. */\n    selectedVariant?: ProductVariantType | null;\n    selectedOptions: SelectedOptions;\n    /** The selected selling plan. */\n    selectedSellingPlan?: SellingPlanType;\n    /** The selected selling plan allocation. */\n    selectedSellingPlanAllocation?: SellingPlanAllocationType;\n    /** The selling plan groups. */\n    sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n      sellingPlans: SellingPlanType[];\n    })[];\n    sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n  },\n  {recurseIntoArrays: true}\n> & {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => boolean;\n};\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["ProductOptionsContext","createContext","ProductProvider","children","data","product","initialVariantId","explicitVariantId","variants","useMemo","flattenConnection","isProductVariantArray","Error","options","getOptions","selectedVariant","setSelectedVariant","useState","getVariantBasedOnIdProp","selectedOptions","setSelectedOptions","getSelectedOptions","useEffect","newSelectedVariant","setSelectedOption","useCallback","name","value","opts","getSelectedVariant","isOptionInStock","option","proposedVariant","availableForSale","sellingPlanGroups","map","sellingPlanGroup","sellingPlans","selectedSellingPlan","setSelectedSellingPlan","undefined","selectedSellingPlanAllocation","sellingPlanAllocations","nodes","edges","find","allocation","sellingPlan","id","variantsConnection","sellingPlanGroupsConnection","_jsx","useProduct","context","useContext","choices","length","Object","keys","variant","entries","every","some","reduce","memo","forEach","opt","Set","add","values","Array","from","foundVariant","console","warn","optionSet","maybeVariantArray","isArray"],"mappings":"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"}
+{"version":3,"file":"ProductProvider.mjs","sources":["../../src/ProductProvider.tsx"],"sourcesContent":["import {\n  useMemo,\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  SelectedOption as SelectedOptionType,\n  SellingPlan,\n  SellingPlanAllocation,\n  Product,\n  ProductVariant as ProductVariantType,\n  ProductVariantConnection,\n  SellingPlan as SellingPlanType,\n  SellingPlanAllocation as SellingPlanAllocationType,\n  SellingPlanGroup as SellingPlanGroupType,\n  SellingPlanGroupConnection,\n} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport {flattenConnection} from './flatten-connection.js';\n\nconst ProductOptionsContext = createContext<ProductHookValue | null>(null);\n\ntype InitialVariantId = ProductVariantType['id'] | null;\n\ninterface ProductProviderProps {\n  /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */\n  data: PartialDeep<Product, {recurseIntoArrays: true}>;\n  /** A `ReactNode` element. */\n  children: React.ReactNode;\n  /**\n   * The initially selected variant.\n   * The following logic applies to `initialVariantId`:\n   * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n   * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n   * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n   * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n   */\n  initialVariantId?: InitialVariantId;\n}\n\n/**\n * `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.\n *\n * It helps manage selected options and variants for a product.\n */\nexport function ProductProvider({\n  children,\n  data: product,\n  initialVariantId: explicitVariantId,\n}: ProductProviderProps) {\n  // The flattened variants\n  const variants = useMemo(\n    () => flattenConnection(product.variants ?? {}),\n    [product.variants]\n  );\n\n  if (!isProductVariantArray(variants)) {\n    throw new Error(\n      `<ProductProvider/> requires 'product.variants.nodes' or 'product.variants.edges'`\n    );\n  }\n\n  // All the options available for a product, based on all the variants\n  const options = useMemo(() => getOptions(variants), [variants]);\n\n  /**\n   * Track the selectedVariant within the provider.\n   */\n  const [selectedVariant, setSelectedVariant] = useState<\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n  >(() => getVariantBasedOnIdProp(explicitVariantId, variants));\n\n  /**\n   * Track the selectedOptions within the provider. If a `initialVariantId`\n   * is passed, use that to select initial options.\n   */\n  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>(() =>\n    getSelectedOptions(selectedVariant)\n  );\n\n  /**\n   * When the initialVariantId changes, we need to make sure we\n   * update the selected variant and selected options. If not,\n   * then the selected variant and options will reference incorrect\n   * values.\n   */\n  useEffect(() => {\n    const newSelectedVariant = getVariantBasedOnIdProp(\n      explicitVariantId,\n      variants\n    );\n    setSelectedVariant(newSelectedVariant);\n    setSelectedOptions(getSelectedOptions(newSelectedVariant));\n  }, [explicitVariantId, variants]);\n\n  /**\n   * Allow the developer to select an option.\n   */\n  const setSelectedOption = useCallback(\n    (name: string, value: string) => {\n      setSelectedOptions((selectedOptions) => {\n        const opts = {...selectedOptions, [name]: value};\n        setSelectedVariant(getSelectedVariant(variants, opts));\n        return opts;\n      });\n    },\n    [setSelectedOptions, variants]\n  );\n\n  const isOptionInStock = useCallback(\n    (option: string, value: string) => {\n      const proposedVariant = getSelectedVariant(variants, {\n        ...selectedOptions,\n        ...{[option]: value},\n      });\n\n      return proposedVariant?.availableForSale ?? true;\n    },\n    [selectedOptions, variants]\n  );\n\n  const sellingPlanGroups = useMemo(\n    () =>\n      flattenConnection(product.sellingPlanGroups ?? {}).map(\n        (sellingPlanGroup) => ({\n          ...sellingPlanGroup,\n          sellingPlans: flattenConnection(sellingPlanGroup?.sellingPlans ?? {}),\n        })\n      ),\n    [product.sellingPlanGroups]\n  );\n\n  /**\n   * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`\n   * is passed, use that as an initial value. Look it up from the `selectedVariant`, since\n   * that is also a requirement.\n   */\n  const [selectedSellingPlan, setSelectedSellingPlan] = useState<\n    PartialDeep<SellingPlan, {recurseIntoArrays: true}> | undefined\n  >(undefined);\n\n  const selectedSellingPlanAllocation = useMemo<\n    PartialDeep<SellingPlanAllocation, {recurseIntoArrays: true}> | undefined\n  >(() => {\n    if (!selectedVariant || !selectedSellingPlan) {\n      return;\n    }\n\n    if (\n      !selectedVariant.sellingPlanAllocations?.nodes &&\n      !selectedVariant.sellingPlanAllocations?.edges\n    ) {\n      throw new Error(\n        `<ProductProvider/>: You must include 'sellingPlanAllocations.nodes' or 'sellingPlanAllocations.edges' in your variants in order to calculate selectedSellingPlanAllocation`\n      );\n    }\n\n    return flattenConnection(selectedVariant.sellingPlanAllocations).find(\n      (allocation) => allocation?.sellingPlan?.id === selectedSellingPlan.id\n    );\n  }, [selectedVariant, selectedSellingPlan]);\n\n  const value = useMemo<ProductHookValue>(\n    () => ({\n      variants,\n      variantsConnection: product.variants,\n      options,\n      selectedVariant,\n      setSelectedVariant,\n      selectedOptions,\n      setSelectedOption,\n      setSelectedOptions,\n      isOptionInStock,\n      selectedSellingPlan,\n      setSelectedSellingPlan,\n      selectedSellingPlanAllocation,\n      sellingPlanGroups,\n      sellingPlanGroupsConnection: product.sellingPlanGroups,\n    }),\n    [\n      isOptionInStock,\n      options,\n      product.sellingPlanGroups,\n      product.variants,\n      selectedOptions,\n      selectedSellingPlan,\n      selectedSellingPlanAllocation,\n      selectedVariant,\n      sellingPlanGroups,\n      setSelectedOption,\n      variants,\n    ]\n  );\n\n  return (\n    <ProductOptionsContext.Provider value={value}>\n      {children}\n    </ProductOptionsContext.Provider>\n  );\n}\n\n/**\n * Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.\n */\nexport function useProduct() {\n  const context = useContext(ProductOptionsContext);\n\n  if (!context) {\n    throw new Error(`'useProduct' must be a child of <ProductProvider />`);\n  }\n\n  return context;\n}\n\nfunction getSelectedVariant(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[],\n  choices: SelectedOptions\n): PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined {\n  /**\n   * Ensure the user has selected all the required options, not just some.\n   */\n  if (\n    !variants.length ||\n    variants?.[0]?.selectedOptions?.length !== Object.keys(choices).length\n  ) {\n    return;\n  }\n\n  return variants?.find((variant) => {\n    return Object.entries(choices).every(([name, value]) => {\n      return variant?.selectedOptions?.some(\n        (option) => option?.name === name && option?.value === value\n      );\n    });\n  });\n}\n\nfunction getOptions(\n  variants: PartialDeep<ProductVariantType, {recurseIntoArrays: true}>[]\n): OptionWithValues[] {\n  const map = variants.reduce((memo, variant) => {\n    if (!variant.selectedOptions) {\n      throw new Error(`'getOptions' requires 'variant.selectedOptions'`);\n    }\n    variant?.selectedOptions?.forEach((opt) => {\n      memo[opt?.name ?? ''] = memo[opt?.name ?? ''] || new Set();\n      memo[opt?.name ?? ''].add(opt?.value ?? '');\n    });\n\n    return memo;\n  }, {} as Record<string, Set<string>>);\n\n  return Object.keys(map).map((option) => {\n    return {\n      name: option,\n      values: Array.from(map[option]),\n    };\n  });\n}\n\nfunction getVariantBasedOnIdProp(\n  explicitVariantId: InitialVariantId | undefined,\n  variants: Array<\n    PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined\n  >\n) {\n  // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above\n  // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.\n  if (explicitVariantId) {\n    const foundVariant = variants.find(\n      (variant) => variant?.id === explicitVariantId\n    );\n    if (!foundVariant) {\n      console.warn(\n        `<ProductProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`\n      );\n    }\n    return foundVariant;\n  }\n  // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.\n  if (explicitVariantId === null) {\n    return null;\n  }\n  // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.\n  // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.\n  if (explicitVariantId === undefined) {\n    return variants.find((variant) => variant?.availableForSale) || variants[0];\n  }\n}\n\nfunction getSelectedOptions(\n  selectedVariant:\n    | PartialDeep<ProductVariantType, {recurseIntoArrays: true}>\n    | undefined\n    | null\n): SelectedOptions {\n  return selectedVariant?.selectedOptions\n    ? selectedVariant.selectedOptions.reduce<SelectedOptions>(\n        (memo, optionSet) => {\n          memo[optionSet?.name ?? ''] = optionSet?.value ?? '';\n          return memo;\n        },\n        {}\n      )\n    : {};\n}\n\nfunction isProductVariantArray(\n  maybeVariantArray:\n    | (PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | undefined)[]\n    | undefined\n): maybeVariantArray is PartialDeep<\n  ProductVariantType,\n  {recurseIntoArrays: true}\n>[] {\n  if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {\n    return false;\n  }\n\n  return true;\n}\n\nexport interface OptionWithValues {\n  name: SelectedOptionType['name'];\n  values: SelectedOptionType['value'][];\n}\n\ntype ProductHookValue = PartialDeep<\n  {\n    /** An array of the variant `nodes` from the `VariantConnection`. */\n    variants: ProductVariantType[];\n    variantsConnection?: ProductVariantConnection;\n    /** An array of the product's options and values. */\n    options: OptionWithValues[];\n    /** The selected variant. */\n    selectedVariant?: ProductVariantType | null;\n    selectedOptions: SelectedOptions;\n    /** The selected selling plan. */\n    selectedSellingPlan?: SellingPlanType;\n    /** The selected selling plan allocation. */\n    selectedSellingPlanAllocation?: SellingPlanAllocationType;\n    /** The selling plan groups. */\n    sellingPlanGroups?: (Omit<SellingPlanGroupType, 'sellingPlans'> & {\n      sellingPlans: SellingPlanType[];\n    })[];\n    sellingPlanGroupsConnection?: SellingPlanGroupConnection;\n  },\n  {recurseIntoArrays: true}\n> & {\n  /** A callback to set the selected variant to the variant passed as an argument. */\n  setSelectedVariant: (\n    variant: PartialDeep<ProductVariantType, {recurseIntoArrays: true}> | null\n  ) => void;\n  /** A callback to set the selected option. */\n  setSelectedOption: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => void;\n  /** A callback to set multiple selected options at once. */\n  setSelectedOptions: (options: SelectedOptions) => void;\n  /** A callback to set the selected selling plan to the one passed as an argument. */\n  setSelectedSellingPlan: (\n    sellingPlan: PartialDeep<SellingPlanType, {recurseIntoArrays: true}>\n  ) => void;\n  /** A callback that returns a boolean indicating if the option is in stock. */\n  isOptionInStock: (\n    name: SelectedOptionType['name'],\n    value: SelectedOptionType['value']\n  ) => boolean;\n};\n\nexport type SelectedOptions = {\n  [key: string]: string;\n};\n"],"names":["ProductOptionsContext","createContext","ProductProvider","children","data","product","initialVariantId","explicitVariantId","variants","useMemo","flattenConnection","isProductVariantArray","Error","options","getOptions","selectedVariant","setSelectedVariant","useState","getVariantBasedOnIdProp","selectedOptions","setSelectedOptions","getSelectedOptions","useEffect","newSelectedVariant","setSelectedOption","useCallback","name","value","opts","getSelectedVariant","isOptionInStock","option","proposedVariant","availableForSale","sellingPlanGroups","map","sellingPlanGroup","sellingPlans","selectedSellingPlan","setSelectedSellingPlan","undefined","selectedSellingPlanAllocation","sellingPlanAllocations","nodes","edges","find","allocation","sellingPlan","id","variantsConnection","sellingPlanGroupsConnection","_jsx","useProduct","context","useContext","choices","length","Object","keys","variant","entries","every","some","reduce","memo","forEach","opt","Set","add","values","Array","from","foundVariant","console","warn","optionSet","maybeVariantArray","isArray"],"mappings":"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"}

package/dist/browser-prod/{ShopPayButton.js → ShopPayButton.mjs}

@@ -1,5 +1,5 @@
-import { useShop } from "./ShopifyProvider.js";
-import { useLoadScript } from "./load-script.js";
+import { useShop } from "./ShopifyProvider.mjs";
+import { useLoadScript } from "./load-script.mjs";
 import { jsx } from "react/jsx-runtime";
 const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
 function ShopPayButton({
@@ -61,4 +61,4 @@ export {
   ShopPayButton,
   getIdFromGid
 };
-//# sourceMappingURL=ShopPayButton.js.map
+//# sourceMappingURL=ShopPayButton.mjs.map

package/dist/{node-dev/ShopPayButton.cjs.map → browser-prod/ShopPayButton.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ShopPayButton.cjs","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\n\n// By using 'never' in the \"or\" cases below, it makes these props \"exclusive\" and means that you cannot pass both of them; you must pass either one OR the other.\ntype ShopPayButtonProps = {\n  /** A string of classes to apply to the `div` that wraps the Shop Pay button. */\n  className?: string;\n  /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */\n  width?: string;\n} & (\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds: string[];\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities?: never;\n    }\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds?: never;\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities: Array<{\n        id: string;\n        quantity: number;\n      }>;\n    }\n);\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        variants: string;\n        'store-url': string;\n      };\n    }\n  }\n}\n\nconst SHOPJS_URL =\n  'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';\n\n/**\n * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.\n * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.\n * It relies on the `<ShopProvider>` context provider.\n */\nexport function ShopPayButton({\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n}: ShopPayButtonProps) {\n  const {storeDomain} = useShop();\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[];\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr);\n      if (bareId) {\n        prev.push(bareId);\n      }\n      return prev;\n    }, []);\n  } else if (variantIdsAndQuantities) {\n    ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr?.id);\n      if (bareId) {\n        prev.push(`${bareId}:${curr?.quantity ?? 1}`);\n      }\n      return prev;\n    }, []);\n  } else {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  const style = width\n    ? ({\n        '--shop-pay-button-width': width,\n      } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div className={className} style={style}>\n      {shopPayLoadedStatus === 'done' && (\n        <shop-pay-button\n          store-url={`https://${storeDomain}`}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Takes a string in the format of \"gid://shopify/ProductVariant/41007289630776\" and returns a string of the ID part at the end: \"41007289630776\"\n */\nexport function getIdFromGid(id?: string) {\n  if (!id) return;\n  return id.split('/').pop();\n}\n\nexport const MissingPropsErrorMessage = `You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton`;\nexport const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;\n"],"names":["SHOPJS_URL","ShopPayButton","variantIds","className","variantIdsAndQuantities","width","storeDomain","useShop","shopPayLoadedStatus","useLoadScript","ids","Error","DoublePropsErrorMessage","reduce","prev","curr","bareId","getIdFromGid","push","id","quantity","MissingPropsErrorMessage","style","undefined","_jsx","join","split","pop"],"mappings":";;;;;AAuCA,MAAMA,aACJ;AAOK,SAASC,cAAc;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAJ4B,GAKP;AACf,QAAA;AAAA,IAACC;AAAAA,MAAeC,gBAAtB,QAAA;AACMC,QAAAA,sBAAsBC,yBAAcT,UAAD;AAErCU,MAAAA;AAEJ,MAAIR,cAAcE,yBAAyB;AACnC,UAAA,IAAIO,MAAMC,uBAAV;AAAA,EACP;AAED,MAAIV,YAAY;AACdQ,UAAMR,WAAWW,OAAiB,CAACC,MAAMC,SAAS;AAC1CC,YAAAA,SAASC,aAAaF,IAAD;AAC3B,UAAIC,QAAQ;AACVF,aAAKI,KAAKF,MAAV;AAAA,MACD;AACMF,aAAAA;AAAAA,IACR,GAAE,CANG,CAAA;AAAA,aAOGV,yBAAyB;AAClCM,UAAMN,wBAAwBS,OAAiB,CAACC,MAAMC,SAAS;;AACvDC,YAAAA,SAASC,aAAaF,6BAAMI,EAAP;AAC3B,UAAIH,QAAQ;AACVF,aAAKI,KAAM,GAAEF,WAAUD,kCAAMK,aAANL,YAAkB,GAAzC;AAAA,MACD;AACMD,aAAAA;AAAAA,IACR,GAAE,CANG,CAAA;AAAA,EAAA,OAOD;AACC,UAAA,IAAIH,MAAMU,wBAAV;AAAA,EACP;AAED,QAAMC,QAAQjB,QACT;AAAA,IACC,2BAA2BA;AAAAA,EAE7BkB,IAAAA;AAEJ,wCACE,OAAA;AAAA,IAAK;AAAA,IAAsB;AAAA,IAA3B,UACGf,wBAAwB,UACvBgB,2BAAAA,IAAA,mBAAA;AAAA,MACE,aAAY,WAAUlB;AAAAA,MACtB,UAAUI,IAAIe,KAAK,GAAT;AAAA,IAAA,CAFZ;AAAA,EAAA,CAHN;AAUD;AAKM,SAASR,aAAaE,IAAa;AACxC,MAAI,CAACA;AAAI;AACT,SAAOA,GAAGO,MAAM,GAAT,EAAcC,IAArB;AACD;AAEM,MAAMN,2BAA4B;AAClC,MAAMT,0BAA2B;;;;;"}
+{"version":3,"file":"ShopPayButton.mjs","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\n\n// By using 'never' in the \"or\" cases below, it makes these props \"exclusive\" and means that you cannot pass both of them; you must pass either one OR the other.\ntype ShopPayButtonProps = {\n  /** A string of classes to apply to the `div` that wraps the Shop Pay button. */\n  className?: string;\n  /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */\n  width?: string;\n} & (\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds: string[];\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities?: never;\n    }\n  | {\n      /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */\n      variantIds?: never;\n      /** An array of variant IDs and quantities to purchase with Shop Pay. */\n      variantIdsAndQuantities: Array<{\n        id: string;\n        quantity: number;\n      }>;\n    }\n);\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        variants: string;\n        'store-url': string;\n      };\n    }\n  }\n}\n\nconst SHOPJS_URL =\n  'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';\n\n/**\n * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.\n * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.\n * It relies on the `<ShopProvider>` context provider.\n */\nexport function ShopPayButton({\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n}: ShopPayButtonProps) {\n  const {storeDomain} = useShop();\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[];\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr);\n      if (bareId) {\n        prev.push(bareId);\n      }\n      return prev;\n    }, []);\n  } else if (variantIdsAndQuantities) {\n    ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {\n      const bareId = getIdFromGid(curr?.id);\n      if (bareId) {\n        prev.push(`${bareId}:${curr?.quantity ?? 1}`);\n      }\n      return prev;\n    }, []);\n  } else {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  const style = width\n    ? ({\n        '--shop-pay-button-width': width,\n      } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div className={className} style={style}>\n      {shopPayLoadedStatus === 'done' && (\n        <shop-pay-button\n          store-url={`https://${storeDomain}`}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\n/**\n * Takes a string in the format of \"gid://shopify/ProductVariant/41007289630776\" and returns a string of the ID part at the end: \"41007289630776\"\n */\nexport function getIdFromGid(id?: string) {\n  if (!id) return;\n  return id.split('/').pop();\n}\n\nexport const MissingPropsErrorMessage = `You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton`;\nexport const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;\n"],"names":["SHOPJS_URL","ShopPayButton","variantIds","className","variantIdsAndQuantities","width","storeDomain","useShop","shopPayLoadedStatus","useLoadScript","ids","Error","DoublePropsErrorMessage","reduce","prev","curr","bareId","getIdFromGid","push","id","quantity","MissingPropsErrorMessage","style","undefined","_jsx","join","split","pop"],"mappings":";;;AAuCA,MAAMA,aACJ;AAOK,SAASC,cAAc;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAJ4B,GAKP;AACf,QAAA;AAAA,IAACC;AAAAA,MAAeC,QAAtB;AACMC,QAAAA,sBAAsBC,cAAcT,UAAD;AAErCU,MAAAA;AAEJ,MAAIR,cAAcE,yBAAyB;AACnC,UAAA,IAAIO,MAAMC,uBAAV;AAAA,EACP;AAED,MAAIV,YAAY;AACdQ,UAAMR,WAAWW,OAAiB,CAACC,MAAMC,SAAS;AAC1CC,YAAAA,SAASC,aAAaF,IAAD;AAC3B,UAAIC,QAAQ;AACVF,aAAKI,KAAKF,MAAV;AAAA,MACD;AACMF,aAAAA;AAAAA,IACR,GAAE,CANG,CAAA;AAAA,aAOGV,yBAAyB;AAClCM,UAAMN,wBAAwBS,OAAiB,CAACC,MAAMC,SAAS;;AACvDC,YAAAA,SAASC,aAAaF,6BAAMI,EAAP;AAC3B,UAAIH,QAAQ;AACVF,aAAKI,KAAM,GAAEF,WAAUD,kCAAMK,aAANL,YAAkB,GAAzC;AAAA,MACD;AACMD,aAAAA;AAAAA,IACR,GAAE,CANG,CAAA;AAAA,EAAA,OAOD;AACC,UAAA,IAAIH,MAAMU,wBAAV;AAAA,EACP;AAED,QAAMC,QAAQjB,QACT;AAAA,IACC,2BAA2BA;AAAAA,EAE7BkB,IAAAA;AAEJ,6BACE,OAAA;AAAA,IAAK;AAAA,IAAsB;AAAA,IAA3B,UACGf,wBAAwB,UACvBgB,oBAAA,mBAAA;AAAA,MACE,aAAY,WAAUlB;AAAAA,MACtB,UAAUI,IAAIe,KAAK,GAAT;AAAA,IAAA,CAFZ;AAAA,EAAA,CAHN;AAUD;AAKM,SAASR,aAAaE,IAAa;AACxC,MAAI,CAACA;AAAI;AACT,SAAOA,GAAGO,MAAM,GAAT,EAAcC,IAArB;AACD;AAEM,MAAMN,2BAA4B;AAClC,MAAMT,0BAA2B;"}

package/dist/browser-prod/{ShopifyProvider.js → ShopifyProvider.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useMemo, useContext } from "react";
-import { SFAPI_VERSION } from "./storefront-api-constants.js";
+import { SFAPI_VERSION } from "./storefront-api-constants.mjs";
 import { jsx } from "react/jsx-runtime";
 const ShopifyContext = createContext({
   storeDomain: "test.myshopify.com",
@@ -43,4 +43,4 @@ export {
   ShopifyProvider,
   useShop
 };
-//# sourceMappingURL=ShopifyProvider.js.map
+//# sourceMappingURL=ShopifyProvider.mjs.map

package/dist/{node-prod/ShopifyProvider.cjs.map → browser-prod/ShopifyProvider.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ShopifyProvider.cjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode, Shop} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test.myshopify.com',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextValue;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(\n    () => ({\n      ...shopifyConfig,\n      storeDomain: shopifyConfig.storeDomain.replace(/^https?:\\/\\//, ''),\n    }),\n    [shopifyConfig]\n  );\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextValue = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */\n  storeDomain: Shop['primaryDomain']['host'];\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","replace","_jsx","useShop","shopContext","useContext"],"mappings":";;;;;AAIA,MAAMA,iBAAiBC,MAAAA,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC,uBAAAA;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EADF;AAAA,EAGTC,UAAU;AAAA,IACRD,SAAS;AAAA,EADD;AAAA,EAGVE,QAAQ;AAVgD,CAAtB;AAgB7B,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAF8B,GAM7B;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEADG;AAAA,EAGP;AAEGD,MAAAA,cAAcR,yBAAyBC,sCAAe;AACxDS,YAAQC,KACL,6EAA4EV,uBAAyDO,yDAAAA,cAAcR,0HADtJ;AAAA,EAGD;AAEKY,QAAAA,cAAcC,MAAAA,QAClB,OAAO;AAAA,IACL,GAAGL;AAAAA,IACHV,aAAaU,cAAcV,YAAYgB,QAAQ,gBAAgB,EAAlD;AAAA,EAAA,IAEf,CAACN,aAAD,CALyB;AASzB,SAAAO,2BAAA,IAAC,eAAe,UAAhB;AAAA,IAAyB,OAAOH;AAAAA,IAAhC;AAAA,EAAA,CADF;AAKD;AAKM,SAASI,UAAU;AAClBC,QAAAA,cAAcC,iBAAWtB,cAAD;AAC9B,MAAI,CAACqB,aAAa;AACV,UAAA,IAAIR,MAAO,wDAAX;AAAA,EACP;AACMQ,SAAAA;AACR;;;"}
+{"version":3,"file":"ShopifyProvider.mjs","sources":["../../src/ShopifyProvider.tsx"],"sourcesContent":["import {createContext, useContext, useMemo, type ReactNode} from 'react';\nimport type {LanguageCode, CountryCode, Shop} from './storefront-api-types.js';\nimport {SFAPI_VERSION} from './storefront-api-constants.js';\n\nconst ShopifyContext = createContext<ShopifyContextValue>({\n  storeDomain: 'test.myshopify.com',\n  storefrontToken: 'abc123',\n  storefrontApiVersion: SFAPI_VERSION,\n  country: {\n    isoCode: 'US',\n  },\n  language: {\n    isoCode: 'EN',\n  },\n  locale: 'EN-US',\n});\n\n/**\n * The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.\n */\nexport function ShopifyProvider({\n  children,\n  shopifyConfig,\n}: {\n  children: ReactNode;\n  shopifyConfig: ShopifyContextValue;\n}) {\n  if (!shopifyConfig) {\n    throw new Error(\n      `The 'shopifyConfig' prop must be passed to '<ShopifyProvider/>'`\n    );\n  }\n\n  if (shopifyConfig.storefrontApiVersion !== SFAPI_VERSION) {\n    console.warn(\n      `This version of Hydrogen-UI is built for Shopify's Storefront API version ${SFAPI_VERSION}, but it looks like you're using version ${shopifyConfig.storefrontApiVersion}. There may be issues or bugs if you use a mismatched version of Hydrogen-UI and the Storefront API.`\n    );\n  }\n\n  const finalConfig = useMemo<ShopifyContextValue>(\n    () => ({\n      ...shopifyConfig,\n      storeDomain: shopifyConfig.storeDomain.replace(/^https?:\\/\\//, ''),\n    }),\n    [shopifyConfig]\n  );\n\n  return (\n    <ShopifyContext.Provider value={finalConfig}>\n      {children}\n    </ShopifyContext.Provider>\n  );\n}\n\n/**\n * Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.\n */\nexport function useShop() {\n  const shopContext = useContext(ShopifyContext);\n  if (!shopContext) {\n    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);\n  }\n  return shopContext;\n}\n\n/**\n * Shopify-specific values that are used in various Hydrogen-UI components and hooks.\n */\nexport type ShopifyContextValue = {\n  /** The globally-unique identifier for the Shop */\n  storefrontId?: string;\n  /** The host name of the domain (eg: `{shop}.myshopify.com`). If a URL with a scheme (for example `https://`) is passed in, then the scheme is removed. */\n  storeDomain: Shop['primaryDomain']['host'];\n  /** The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */\n  storefrontToken: string;\n  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.  */\n  storefrontApiVersion: string;\n  country?: {\n    /**\n     * The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.\n     */\n    isoCode: CountryCode;\n  };\n  language?: {\n    /**\n     * `ISO 369` language codes supported by Shopify.\n     */\n    isoCode: LanguageCode;\n  };\n  /**\n   * The locale string based on `country` and `language`.\n   */\n  locale?: string;\n};\n"],"names":["ShopifyContext","createContext","storeDomain","storefrontToken","storefrontApiVersion","SFAPI_VERSION","country","isoCode","language","locale","ShopifyProvider","children","shopifyConfig","Error","console","warn","finalConfig","useMemo","replace","_jsx","useShop","shopContext","useContext"],"mappings":";;;AAIA,MAAMA,iBAAiBC,cAAmC;AAAA,EACxDC,aAAa;AAAA,EACbC,iBAAiB;AAAA,EACjBC,sBAAsBC;AAAAA,EACtBC,SAAS;AAAA,IACPC,SAAS;AAAA,EADF;AAAA,EAGTC,UAAU;AAAA,IACRD,SAAS;AAAA,EADD;AAAA,EAGVE,QAAQ;AAVgD,CAAtB;AAgB7B,SAASC,gBAAgB;AAAA,EAC9BC;AAAAA,EACAC;AAF8B,GAM7B;AACD,MAAI,CAACA,eAAe;AACZ,UAAA,IAAIC,MACP,iEADG;AAAA,EAGP;AAEGD,MAAAA,cAAcR,yBAAyBC,eAAe;AACxDS,YAAQC,KACL,6EAA4EV,yDAAyDO,cAAcR,0HADtJ;AAAA,EAGD;AAEKY,QAAAA,cAAcC,QAClB,OAAO;AAAA,IACL,GAAGL;AAAAA,IACHV,aAAaU,cAAcV,YAAYgB,QAAQ,gBAAgB,EAAlD;AAAA,EAAA,IAEf,CAACN,aAAD,CALyB;AASzB,SAAAO,oBAAC,eAAe,UAAhB;AAAA,IAAyB,OAAOH;AAAAA,IAAhC;AAAA,EAAA,CADF;AAKD;AAKM,SAASI,UAAU;AAClBC,QAAAA,cAAcC,WAAWtB,cAAD;AAC9B,MAAI,CAACqB,aAAa;AACV,UAAA,IAAIR,MAAO,wDAAX;AAAA,EACP;AACMQ,SAAAA;AACR;"}

package/dist/browser-prod/{Video.js → Video.mjs}

@@ -1,4 +1,4 @@
-import { shopifyImageLoader } from "./image-size.js";
+import { shopifyImageLoader } from "./image-size.mjs";
 import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 function Video(props) {
@@ -41,4 +41,4 @@ function Video(props) {
 export {
   Video
 };
-//# sourceMappingURL=Video.js.map
+//# sourceMappingURL=Video.mjs.map

package/dist/{node-prod/Video.cjs.map → browser-prod/Video.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Video.cjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":["Video","props","data","previewImageOptions","id","playsInline","controls","sourceProps","passthroughProps","posterUrl","shopifyImageLoader","src","previewImage","url","sources","Error","map","source","mimeType"],"mappings":";;;;;AAmBO,SAASA,MAAMC,OAAoD;;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,cAAc,CANV;AAAA,OAODC;AAAAA,EACDP,IAAAA;AAEJ,QAAMQ,YAAYC,UAAAA,mBAAmB;AAAA,IACnCC,MAAKT,gBAAKU,iBAALV,mBAAmBW,QAAnBX,YAA0B;AAAA,IAC/B,GAAGC;AAAAA,EAAAA,CAF+B;AAKhC,MAAA,CAACD,KAAKY,SAAS;AACX,UAAA,IAAIC,MAAO,0CAAX;AAAA,EACP;AAED,wCAEE,SAAA;AAAA,IAAA,GACMP;AAAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQC;AAAAA,IALV,UAOGP,KAAKY,QAAQE,IAAKC,CAAW,WAAA;AAC5B,UAAI,GAAEA,iCAAQJ,SAAOI,iCAAQC,YAAW;AAChC,cAAA,IAAIH,MAAO,mDAAX;AAAA,MACP;AACD;WAEQR;AAAAA,QACJ,KAAKU,OAAOJ;AAAAA,QACZ,KAAKI,OAAOJ;AAAAA,QACZ,MAAMI,OAAOC;AAAAA,MAAAA,CALjB;AAAA,IAAA,CAJD;AAAA,EAAA,CAPH;AAsBH;;"}
+{"version":3,"file":"Video.mjs","sources":["../../src/Video.tsx"],"sourcesContent":["import {type HTMLAttributes} from 'react';\nimport {shopifyImageLoader} from './image-size.js';\nimport type {Video as VideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface VideoProps {\n  /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */\n  data: PartialDeep<VideoType, {recurseIntoArrays: true}>;\n  /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */\n  previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];\n  /** Props that will be passed to the `video` element's `source` children elements. */\n  sourceProps?: HTMLAttributes<HTMLSourceElement> & {\n    'data-testid'?: string;\n  };\n}\n\n/**\n * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).\n */\nexport function Video(props: JSX.IntrinsicElements['video'] & VideoProps) {\n  const {\n    data,\n    previewImageOptions,\n    id = data.id,\n    playsInline = true,\n    controls = true,\n    sourceProps = {},\n    ...passthroughProps\n  } = props;\n\n  const posterUrl = shopifyImageLoader({\n    src: data.previewImage?.url ?? '',\n    ...previewImageOptions,\n  });\n\n  if (!data.sources) {\n    throw new Error(`<Video/> requires a 'data.sources' array`);\n  }\n\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...passthroughProps}\n      id={id}\n      playsInline={playsInline}\n      controls={controls}\n      poster={posterUrl}\n    >\n      {data.sources.map((source) => {\n        if (!(source?.url && source?.mimeType)) {\n          throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);\n        }\n        return (\n          <source\n            {...sourceProps}\n            key={source.url}\n            src={source.url}\n            type={source.mimeType}\n          />\n        );\n      })}\n    </video>\n  );\n}\n"],"names":["Video","props","data","previewImageOptions","id","playsInline","controls","sourceProps","passthroughProps","posterUrl","shopifyImageLoader","src","previewImage","url","sources","Error","map","source","mimeType"],"mappings":";;;AAmBO,SAASA,MAAMC,OAAoD;;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,WAAW;AAAA,IACXC,cAAc,CANV;AAAA,OAODC;AAAAA,EACDP,IAAAA;AAEJ,QAAMQ,YAAYC,mBAAmB;AAAA,IACnCC,MAAKT,gBAAKU,iBAALV,mBAAmBW,QAAnBX,YAA0B;AAAA,IAC/B,GAAGC;AAAAA,EAAAA,CAF+B;AAKhC,MAAA,CAACD,KAAKY,SAAS;AACX,UAAA,IAAIC,MAAO,0CAAX;AAAA,EACP;AAED,6BAEE,SAAA;AAAA,IAAA,GACMP;AAAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQC;AAAAA,IALV,UAOGP,KAAKY,QAAQE,IAAKC,CAAW,WAAA;AAC5B,UAAI,GAAEA,iCAAQJ,SAAOI,iCAAQC,YAAW;AAChC,cAAA,IAAIH,MAAO,mDAAX;AAAA,MACP;AACD;WAEQR;AAAAA,QACJ,KAAKU,OAAOJ;AAAAA,QACZ,KAAKI,OAAOJ;AAAAA,QACZ,MAAMI,OAAOC;AAAAA,MAAAA,CALjB;AAAA,IAAA,CAJD;AAAA,EAAA,CAPH;AAsBH;"}

package/dist/browser-prod/_virtual/{index.js → index.mjs}

@@ -2,4 +2,4 @@ var shim = { exports: {} };
 export {
   shim as s
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/browser-prod/_virtual/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/browser-prod/_virtual/{use-sync-external-store-shim.development.js → use-sync-external-store-shim.development.mjs}

@@ -2,4 +2,4 @@ var useSyncExternalStoreShim_development = {};
 export {
   useSyncExternalStoreShim_development as __exports
 };
-//# sourceMappingURL=use-sync-external-store-shim.development.js.map
+//# sourceMappingURL=use-sync-external-store-shim.development.mjs.map

package/dist/browser-prod/_virtual/use-sync-external-store-shim.development.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.development.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/{browser-dev/_virtual/use-sync-external-store-shim.production.min.js → browser-prod/_virtual/use-sync-external-store-shim.production.min.mjs}

@@ -2,4 +2,4 @@ var useSyncExternalStoreShim_production_min = {};
 export {
   useSyncExternalStoreShim_production_min as __exports
 };
-//# sourceMappingURL=use-sync-external-store-shim.production.min.js.map
+//# sourceMappingURL=use-sync-external-store-shim.production.min.mjs.map

package/dist/browser-prod/_virtual/use-sync-external-store-shim.production.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-external-store-shim.production.min.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/{browser-dev/_virtual/with-selector.development.js → browser-prod/_virtual/with-selector.development.mjs}

@@ -2,4 +2,4 @@ var withSelector_development = {};
 export {
   withSelector_development as __exports
 };
-//# sourceMappingURL=with-selector.development.js.map
+//# sourceMappingURL=with-selector.development.mjs.map

package/dist/browser-prod/_virtual/with-selector.development.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.development.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/{browser-dev/_virtual/with-selector.js → browser-prod/_virtual/with-selector.mjs}

@@ -2,4 +2,4 @@ var withSelector = { exports: {} };
 export {
   withSelector as w
 };
-//# sourceMappingURL=with-selector.js.map
+//# sourceMappingURL=with-selector.mjs.map

package/dist/browser-prod/_virtual/with-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/{browser-dev/_virtual/with-selector.production.min.js → browser-prod/_virtual/with-selector.production.min.mjs}

@@ -2,4 +2,4 @@ var withSelector_production_min = {};
 export {
   withSelector_production_min as __exports
 };
-//# sourceMappingURL=with-selector.production.min.js.map
+//# sourceMappingURL=with-selector.production.min.mjs.map

package/dist/browser-prod/_virtual/with-selector.production.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-selector.production.min.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/browser-prod/{cart-constants.js → cart-constants.mjs}

@@ -14,4 +14,4 @@ export {
   SHOPIFY_Y,
   STOREFRONT_API_PUBLIC_TOKEN_HEADER
 };
-//# sourceMappingURL=cart-constants.js.map
+//# sourceMappingURL=cart-constants.mjs.map

package/dist/{node-prod/cart-constants.cjs.map → browser-prod/cart-constants.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cart-constants.cjs","sources":["../../src/cart-constants.ts"],"sourcesContent":["export const CART_ID_STORAGE_KEY = 'shopifyCartId';\nexport const CART_COOKIE_TTL_DAYS = 14;\n\n// Needed for cart analytics within Shopify\nexport const STOREFRONT_API_PUBLIC_TOKEN_HEADER =\n  'X-Shopify-Storefront-Access-Token';\nexport const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';\nexport const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';\nexport const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';\nexport const SHOPIFY_Y = '_shopify_y';\nexport const SHOPIFY_S = '_shopify_s';\n"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB;AAI5B,MAAM,qCACX;AACK,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,YAAY;AAClB,MAAM,YAAY;;;;;;;;"}
+{"version":3,"file":"cart-constants.mjs","sources":["../../src/cart-constants.ts"],"sourcesContent":["export const CART_ID_STORAGE_KEY = 'shopifyCartId';\nexport const CART_COOKIE_TTL_DAYS = 14;\n\n// Needed for cart analytics within Shopify\nexport const STOREFRONT_API_PUBLIC_TOKEN_HEADER =\n  'X-Shopify-Storefront-Access-Token';\nexport const SHOPIFY_STOREFRONT_ID_HEADER = 'Shopify-Storefront-Id';\nexport const SHOPIFY_STOREFRONT_Y_HEADER = 'Shopify-Storefront-Y';\nexport const SHOPIFY_STOREFRONT_S_HEADER = 'Shopify-Storefront-S';\nexport const SHOPIFY_Y = '_shopify_y';\nexport const SHOPIFY_S = '_shopify_s';\n"],"names":[],"mappings":"AAAO,MAAM,sBAAsB;AAI5B,MAAM,qCACX;AACK,MAAM,+BAA+B;AACrC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,YAAY;AAClB,MAAM,YAAY;"}

package/dist/{browser-dev/cart-hooks.js → browser-prod/cart-hooks.mjs}

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { useShop } from "./ShopifyProvider.js";
-import { SHOPIFY_Y, SHOPIFY_S, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.js";
+import { useShop } from "./ShopifyProvider.mjs";
+import { SHOPIFY_Y, SHOPIFY_S, STOREFRONT_API_PUBLIC_TOKEN_HEADER, SHOPIFY_STOREFRONT_ID_HEADER, SHOPIFY_STOREFRONT_Y_HEADER, SHOPIFY_STOREFRONT_S_HEADER } from "./cart-constants.mjs";
 import { parse } from "worktop/cookie";
 function useCartFetch() {
   const {
@@ -45,4 +45,4 @@ function useCartFetch() {
 export {
   useCartFetch
 };
-//# sourceMappingURL=cart-hooks.js.map
+//# sourceMappingURL=cart-hooks.mjs.map

package/dist/{node-dev/cart-hooks.cjs.map → browser-prod/cart-hooks.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cart-hooks.cjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  STOREFRONT_API_PUBLIC_TOKEN_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storeDomain, storefrontApiVersion, storefrontToken, storefrontId} =\n    useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers: Record<string, string> = {\n        'Content-Type': 'application/json',\n        'X-SDK-Variant': 'hydrogen',\n        'X-SDK-Version': storefrontApiVersion,\n        [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken,\n      };\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(\n        `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,\n        {\n          method: 'POST',\n          headers,\n          body: JSON.stringify({\n            query: query.toString(),\n            variables,\n          }),\n        }\n      )\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":["useCartFetch","storeDomain","storefrontApiVersion","storefrontToken","storefrontId","useShop","useCallback","query","variables","headers","STOREFRONT_API_PUBLIC_TOKEN_HEADER","SHOPIFY_STOREFRONT_ID_HEADER","cookieData","parse","document","cookie","SHOPIFY_Y","SHOPIFY_S","SHOPIFY_STOREFRONT_Y_HEADER","SHOPIFY_STOREFRONT_S_HEADER","fetch","method","body","JSON","stringify","toString","then","res","json","catch","error","data","undefined","errors"],"mappings":";;;;;;AAiBO,SAASA,eAAe;AACvB,QAAA;AAAA,IAACC;AAAAA,IAAaC;AAAAA,IAAsBC;AAAAA,IAAiBC;AAAAA,MACzDC,gBADF,QAAA;AAGA,SAAOC,kBACL,CAAqB;AAAA,IACnBC;AAAAA,IACAC;AAAAA,EAAAA,MAIgE;AAChE,UAAMC,UAAkC;AAAA,MACtC,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,iBAAiBP;AAAAA,MACjB,CAACQ,cAAqCP,qCAAAA;AAAAA,IAAAA;AAGxC,QAAIC,cAAc;AAChBK,cAAQE,cAAAA,gCAAgCP;AAAAA,IACzC;AAGKQ,UAAAA,aAAaC,OAAAA,MAAMC,SAASC,MAAV;AACpBH,QAAAA,WAAWI,cAAcJ,cAAAA,WAAWK,cAAY,YAAA;AAClDR,cAAQS,6CAA+BN,WAAWI,cAAAA;AAClDP,cAAQU,6CAA+BP,WAAWK,cAAAA;AAAAA,IACnD;AAEMG,WAAAA,MACJ,WAAUnB,mBAAmBC,qCAC9B;AAAA,MACEmB,QAAQ;AAAA,MACRZ;AAAAA,MACAa,MAAMC,KAAKC,UAAU;AAAA,QACnBjB,OAAOA,MAAMkB,SADM;AAAA,QAEnBjB;AAAAA,MAAAA,CAFI;AAAA,IAAA,CALE,EAWTkB,KAAMC,CAAAA,QAAQA,IAAIC,MAXd,EAYJC,MAAOC,CAAU,UAAA;AACT,aAAA;AAAA,QACLC,MAAMC;AAAAA,QACNC,QAAQH,MAAML,SAAN;AAAA,MAAA;AAAA,IAFH,CAbJ;AAAA,KAmBT,CAACxB,aAAaC,sBAAsBC,iBAAiBC,YAArD,CA7CgB;AA+CnB;;"}
+{"version":3,"file":"cart-hooks.mjs","sources":["../../src/cart-hooks.tsx"],"sourcesContent":["import {useState, useCallback} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {flattenConnection} from './flatten-connection.js';\nimport {CartInput, Cart as CartType} from './storefront-api-types.js';\nimport {CartCreate, defaultCartFragment} from './cart-queries.js';\nimport {Cart} from './cart-types.js';\nimport {\n  SHOPIFY_STOREFRONT_ID_HEADER,\n  STOREFRONT_API_PUBLIC_TOKEN_HEADER,\n  SHOPIFY_STOREFRONT_Y_HEADER,\n  SHOPIFY_STOREFRONT_S_HEADER,\n  SHOPIFY_Y,\n  SHOPIFY_S,\n} from './cart-constants.js';\nimport {parse} from 'worktop/cookie';\nimport type {StorefrontApiResponseOkPartial} from './storefront-api-response.types.js';\n\nexport function useCartFetch() {\n  const {storeDomain, storefrontApiVersion, storefrontToken, storefrontId} =\n    useShop();\n\n  return useCallback(\n    <ReturnDataGeneric,>({\n      query,\n      variables,\n    }: {\n      query: string;\n      variables: Record<string, unknown>;\n    }): Promise<StorefrontApiResponseOkPartial<ReturnDataGeneric>> => {\n      const headers: Record<string, string> = {\n        'Content-Type': 'application/json',\n        'X-SDK-Variant': 'hydrogen',\n        'X-SDK-Version': storefrontApiVersion,\n        [STOREFRONT_API_PUBLIC_TOKEN_HEADER]: storefrontToken,\n      };\n\n      if (storefrontId) {\n        headers[SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;\n      }\n\n      // Find Shopify cookies\n      const cookieData = parse(document.cookie);\n      if (cookieData[SHOPIFY_Y] && cookieData[SHOPIFY_S]) {\n        headers[SHOPIFY_STOREFRONT_Y_HEADER] = cookieData[SHOPIFY_Y];\n        headers[SHOPIFY_STOREFRONT_S_HEADER] = cookieData[SHOPIFY_S];\n      }\n\n      return fetch(\n        `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,\n        {\n          method: 'POST',\n          headers,\n          body: JSON.stringify({\n            query: query.toString(),\n            variables,\n          }),\n        }\n      )\n        .then((res) => res.json())\n        .catch((error) => {\n          return {\n            data: undefined,\n            errors: error.toString(),\n          };\n        });\n    },\n    [storeDomain, storefrontApiVersion, storefrontToken, storefrontId]\n  );\n}\n\nexport function useInstantCheckout() {\n  const [cart, updateCart] = useState<Cart | undefined>();\n  const [checkoutUrl, updateCheckoutUrl] = useState<Cart['checkoutUrl']>();\n  const [error, updateError] = useState<string | undefined>();\n\n  const fetch = useCartFetch();\n\n  const createInstantCheckout = useCallback(\n    async (cartInput: CartInput) => {\n      const {data, errors} = await fetch<{\n        cartCreate: {cart: CartType};\n      }>({\n        query: CartCreate(defaultCartFragment),\n        variables: {\n          input: cartInput,\n        },\n      });\n\n      if (errors) {\n        updateError(errors.toString());\n        updateCart(undefined);\n        updateCheckoutUrl(undefined);\n      }\n\n      if (data?.cartCreate?.cart) {\n        const dataCart = data.cartCreate.cart;\n        updateCart({\n          ...dataCart,\n          lines: flattenConnection(dataCart.lines),\n          note: dataCart.note ?? undefined,\n        });\n        updateCheckoutUrl(dataCart.checkoutUrl);\n      }\n    },\n    [fetch]\n  );\n\n  return {cart, checkoutUrl, error, createInstantCheckout};\n}\n"],"names":["useCartFetch","storeDomain","storefrontApiVersion","storefrontToken","storefrontId","useShop","useCallback","query","variables","headers","STOREFRONT_API_PUBLIC_TOKEN_HEADER","SHOPIFY_STOREFRONT_ID_HEADER","cookieData","parse","document","cookie","SHOPIFY_Y","SHOPIFY_S","SHOPIFY_STOREFRONT_Y_HEADER","SHOPIFY_STOREFRONT_S_HEADER","fetch","method","body","JSON","stringify","toString","then","res","json","catch","error","data","undefined","errors"],"mappings":";;;;AAiBO,SAASA,eAAe;AACvB,QAAA;AAAA,IAACC;AAAAA,IAAaC;AAAAA,IAAsBC;AAAAA,IAAiBC;AAAAA,MACzDC,QADF;AAGA,SAAOC,YACL,CAAqB;AAAA,IACnBC;AAAAA,IACAC;AAAAA,EAAAA,MAIgE;AAChE,UAAMC,UAAkC;AAAA,MACtC,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,iBAAiBP;AAAAA,MACjB,CAACQ,qCAAqCP;AAAAA,IAAAA;AAGxC,QAAIC,cAAc;AAChBK,cAAQE,gCAAgCP;AAAAA,IACzC;AAGKQ,UAAAA,aAAaC,MAAMC,SAASC,MAAV;AACpBH,QAAAA,WAAWI,cAAcJ,WAAWK,YAAY;AAClDR,cAAQS,+BAA+BN,WAAWI;AAClDP,cAAQU,+BAA+BP,WAAWK;AAAAA,IACnD;AAEMG,WAAAA,MACJ,WAAUnB,mBAAmBC,qCAC9B;AAAA,MACEmB,QAAQ;AAAA,MACRZ;AAAAA,MACAa,MAAMC,KAAKC,UAAU;AAAA,QACnBjB,OAAOA,MAAMkB,SADM;AAAA,QAEnBjB;AAAAA,MAAAA,CAFI;AAAA,IAAA,CALE,EAWTkB,KAAMC,CAAAA,QAAQA,IAAIC,MAXd,EAYJC,MAAOC,CAAU,UAAA;AACT,aAAA;AAAA,QACLC,MAAMC;AAAAA,QACNC,QAAQH,MAAML,SAAN;AAAA,MAAA;AAAA,IAFH,CAbJ;AAAA,KAmBT,CAACxB,aAAaC,sBAAsBC,iBAAiBC,YAArD,CA7CgB;AA+CnB;"}

package/dist/browser-prod/{cart-queries.js → cart-queries.mjs}

@@ -111,4 +111,4 @@ export {
   CartNoteUpdate,
   CartQuery
 };
-//# sourceMappingURL=cart-queries.js.map
+//# sourceMappingURL=cart-queries.mjs.map

package/dist/{node-prod/cart-queries.cjs.map → browser-prod/cart-queries.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"cart-queries.cjs","sources":["../../src/cart-queries.ts"],"sourcesContent":["export const CartLineAdd = (cartFragment: string) => `\nmutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesAdd(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartCreate = (cartFragment: string) => `\nmutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartCreate(input: $input) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartLineRemove = (cartFragment: string) => `\nmutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartLineUpdate = (cartFragment: string) => `\nmutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesUpdate(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartNoteUpdate = (cartFragment: string) => `\nmutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartNoteUpdate(cartId: $cartId, note: $note) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartBuyerIdentityUpdate = (cartFragment: string) => `\nmutation CartBuyerIdentityUpdate(\n  $cartId: ID!\n  $buyerIdentity: CartBuyerIdentityInput!\n  $numCartLines: Int = 250\n  $country: CountryCode = ZZ\n) @inContext(country: $country) {\n  cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartAttributesUpdate = (cartFragment: string) => `\nmutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartDiscountCodesUpdate = (cartFragment: string) => `\nmutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartQuery = (cartFragment: string) => `\nquery CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cart(id: $id) {\n    ...CartFragment\n  }\n}\n\n${cartFragment}\n`;\n\nexport 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`;\n"],"names":[],"mappings":";;AAAa,MAAA,cAAc,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASnD;AAAA;AAGW,MAAA,aAAa,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,0BAA0B,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/D;AAAA;AAGW,MAAA,uBAAuB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D;AAAA;AAGW,MAAA,0BAA0B,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/D;AAAA;AAGW,MAAA,YAAY,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjD;AAAA;;;;;;;;;;"}
+{"version":3,"file":"cart-queries.mjs","sources":["../../src/cart-queries.ts"],"sourcesContent":["export const CartLineAdd = (cartFragment: string) => `\nmutation CartLineAdd($cartId: ID!, $lines: [CartLineInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesAdd(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartCreate = (cartFragment: string) => `\nmutation CartCreate($input: CartInput!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartCreate(input: $input) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartLineRemove = (cartFragment: string) => `\nmutation CartLineRemove($cartId: ID!, $lines: [ID!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesRemove(cartId: $cartId, lineIds: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartLineUpdate = (cartFragment: string) => `\nmutation CartLineUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartLinesUpdate(cartId: $cartId, lines: $lines) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartNoteUpdate = (cartFragment: string) => `\nmutation CartNoteUpdate($cartId: ID!, $note: String, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartNoteUpdate(cartId: $cartId, note: $note) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartBuyerIdentityUpdate = (cartFragment: string) => `\nmutation CartBuyerIdentityUpdate(\n  $cartId: ID!\n  $buyerIdentity: CartBuyerIdentityInput!\n  $numCartLines: Int = 250\n  $country: CountryCode = ZZ\n) @inContext(country: $country) {\n  cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartAttributesUpdate = (cartFragment: string) => `\nmutation CartAttributesUpdate($attributes: [AttributeInput!]!, $cartId: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartAttributesUpdate(attributes: $attributes, cartId: $cartId) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartDiscountCodesUpdate = (cartFragment: string) => `\nmutation CartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!], $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) {\n    cart {\n      ...CartFragment\n    }\n  }\n}\n\n${cartFragment}\n`;\n\nexport const CartQuery = (cartFragment: string) => `\nquery CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ) @inContext(country: $country) {\n  cart(id: $id) {\n    ...CartFragment\n  }\n}\n\n${cartFragment}\n`;\n\nexport 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`;\n"],"names":[],"mappings":"AAAa,MAAA,cAAc,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASnD;AAAA;AAGW,MAAA,aAAa,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,iBAAiB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStD;AAAA;AAGW,MAAA,0BAA0B,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/D;AAAA;AAGW,MAAA,uBAAuB,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D;AAAA;AAGW,MAAA,0BAA0B,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/D;AAAA;AAGW,MAAA,YAAY,CAAC,iBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjD;AAAA;"}

package/dist/browser-prod/{flatten-connection.js → flatten-connection.mjs}

@@ -22,4 +22,4 @@ function flattenConnection(connection) {
 export {
   flattenConnection
 };
-//# sourceMappingURL=flatten-connection.js.map
+//# sourceMappingURL=flatten-connection.mjs.map

package/dist/{node-prod/flatten-connection.cjs.map → browser-prod/flatten-connection.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"flatten-connection.cjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<T>(\n  connection?: PartialDeep<GraphQLConnection<T>, {recurseIntoArrays: true}>\n): PartialDeep<T, {recurseIntoArrays: true}>[] {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr);\n      return [];\n    }\n  }\n\n  if (connection.nodes) {\n    return connection.nodes as PartialDeep<T, {recurseIntoArrays: true}>[];\n  }\n\n  if (connection.edges) {\n    return connection.edges.map((edge) => {\n      if (!edge?.node) {\n        throw new Error('Connection edges must contain nodes');\n      }\n      return edge.node;\n    });\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `The connection did not contain either \"nodes\" or \"edges.node\". A empty array will be returned in its place.`\n    );\n  }\n\n  return [];\n}\n\ninterface GraphQLConnection<T> {\n  edges?: {node: T}[];\n  nodes?: T[];\n}\n"],"names":[],"mappings":";;AAQO,SAAS,kBACd,YAC6C;AAC7C,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AAGxF;AACL,cAAQ,MAAM,eAAe;AAC7B,aAAO;IACT;AAAA,EACF;AAEA,MAAI,WAAW,OAAO;AACpB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,OAAO;AACpB,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACT,cAAA,IAAI,MAAM,qCAAqC;AAAA,MACvD;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAQA,SAAO;AACT;;"}
+{"version":3,"file":"flatten-connection.mjs","sources":["../../src/flatten-connection.ts"],"sourcesContent":["import type {PartialDeep} from 'type-fest';\n\n/**\n * The `flattenConnection` utility transforms a connection object from the Storefront API (for example, [Product-related connections](https://shopify.dev/api/storefront/reference/products/product)) into a flat array of nodes.\n * The utility works with either `nodes` or `edges.node`.\n *\n * If `connection` is null or undefined, will return an empty array instead in production. In development, an error will be thrown.\n */\nexport function flattenConnection<T>(\n  connection?: PartialDeep<GraphQLConnection<T>, {recurseIntoArrays: true}>\n): PartialDeep<T, {recurseIntoArrays: true}>[] {\n  if (!connection) {\n    const noConnectionErr = `flattenConnection(): needs a 'connection' to flatten, but received '${connection}' instead`;\n    if (__HYDROGEN_DEV__) {\n      throw new Error(noConnectionErr);\n    } else {\n      console.error(noConnectionErr);\n      return [];\n    }\n  }\n\n  if (connection.nodes) {\n    return connection.nodes as PartialDeep<T, {recurseIntoArrays: true}>[];\n  }\n\n  if (connection.edges) {\n    return connection.edges.map((edge) => {\n      if (!edge?.node) {\n        throw new Error('Connection edges must contain nodes');\n      }\n      return edge.node;\n    });\n  }\n\n  if (__HYDROGEN_DEV__) {\n    console.warn(\n      `The connection did not contain either \"nodes\" or \"edges.node\". A empty array will be returned in its place.`\n    );\n  }\n\n  return [];\n}\n\ninterface GraphQLConnection<T> {\n  edges?: {node: T}[];\n  nodes?: T[];\n}\n"],"names":[],"mappings":"AAQO,SAAS,kBACd,YAC6C;AAC7C,MAAI,CAAC,YAAY;AACf,UAAM,kBAAkB,uEAAuE;AAGxF;AACL,cAAQ,MAAM,eAAe;AAC7B,aAAO;IACT;AAAA,EACF;AAEA,MAAI,WAAW,OAAO;AACpB,WAAO,WAAW;AAAA,EACpB;AAEA,MAAI,WAAW,OAAO;AACpB,WAAO,WAAW,MAAM,IAAI,CAAC,SAAS;AAChC,UAAA,EAAC,6BAAM,OAAM;AACT,cAAA,IAAI,MAAM,qCAAqC;AAAA,MACvD;AACA,aAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AAQA,SAAO;AACT;"}

package/dist/{browser-dev/image-size.js → browser-prod/image-size.mjs}

@@ -77,4 +77,4 @@ export {
   getShopifyImageDimensions,
   shopifyImageLoader
 };
-//# sourceMappingURL=image-size.js.map
+//# sourceMappingURL=image-size.mjs.map

package/dist/{node-dev/image-size.cjs.map → browser-prod/image-size.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"image-size.cjs","sources":["../../src/image-size.ts"],"sourcesContent":["import type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';\n\n// TODO: Are there other CDNs missing from here?\nconst PRODUCTION_CDN_HOSTNAMES = [\n  'cdn.shopify.com',\n  'cdn.shopifycdn.net',\n  'shopify-assets.shopifycdn.com',\n  'shopify-assets.shopifycdn.net',\n];\nconst LOCAL_CDN_HOSTNAMES = ['spin.dev'];\nconst ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];\n\n// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions\n// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag\nexport const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];\n\n/**\n * Adds image size parameters to an image URL hosted by Shopify's CDN\n */\nexport function addImageSizeParametersToUrl({\n  src,\n  width,\n  height,\n  crop,\n  scale,\n}: ShopifyLoaderParams) {\n  const newUrl = new URL(src);\n\n  const multipliedScale = scale ?? 1;\n\n  if (width) {\n    let finalWidth: string;\n\n    if (typeof width === 'string') {\n      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();\n    } else {\n      finalWidth = (Number(width) * multipliedScale).toString();\n    }\n\n    newUrl.searchParams.append('width', finalWidth);\n  }\n\n  if (height && typeof height === 'number') {\n    newUrl.searchParams.append('height', (height * multipliedScale).toString());\n  }\n\n  crop && newUrl.searchParams.append('crop', crop);\n\n  // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead\n  // scale && newUrl.searchParams.append('scale', scale.toString());\n\n  return newUrl.toString();\n}\n\nexport function shopifyImageLoader(params: ShopifyLoaderParams) {\n  const newSrc = new URL(params.src);\n  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) =>\n    newSrc.hostname.endsWith(allowedHostname)\n  );\n\n  if (\n    !isShopifyServedImage ||\n    (!params.width && !params.height && !params.crop && !params.scale)\n  ) {\n    return params.src;\n  }\n\n  return addImageSizeParametersToUrl(params);\n}\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type GetShopifyImageDimensionsProps = {\n  data: Pick<\n    PartialDeep<ImageType, {recurseIntoArrays: true}>,\n    'altText' | 'url' | 'id' | 'width' | 'height'\n  >;\n  loaderOptions?: ShopifyLoaderOptions;\n  elementProps?: {\n    width?: HtmlImageProps['width'];\n    height?: HtmlImageProps['height'];\n  };\n};\n\ntype GetShopifyImageDimensionsPropsReturn = {\n  width: number | string | null;\n  height: number | string | null;\n};\n\n/**\n * Width and height are determined using the followiing priority list:\n * 1. `loaderOptions`'s width/height\n * 2. `elementProps`'s width/height\n * 3. `data`'s width/height\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing\n * value will reamin as `null`\n */\nexport function getShopifyImageDimensions({\n  data: sfapiImage,\n  loaderOptions,\n  elementProps,\n}: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn {\n  let aspectRatio: number | null = null;\n\n  if (sfapiImage?.width && sfapiImage?.height) {\n    aspectRatio = sfapiImage?.width / sfapiImage?.height;\n  }\n\n  //  * 1. `loaderOptions`'s width/height\n  if (loaderOptions?.width || loaderOptions?.height) {\n    return {\n      width:\n        loaderOptions?.width ??\n        (aspectRatio && typeof loaderOptions.height === 'number'\n          ? Math.round(aspectRatio * loaderOptions.height)\n          : null),\n      height:\n        loaderOptions?.height ??\n        (aspectRatio && typeof loaderOptions.width === 'number'\n          ? Math.round(aspectRatio * loaderOptions.width)\n          : null),\n    };\n  }\n\n  //  * 2. `elementProps`'s width/height\n  if (elementProps?.width || elementProps?.height) {\n    return {\n      width:\n        elementProps?.width ??\n        (aspectRatio && typeof elementProps.height === 'number'\n          ? Math.round(aspectRatio * elementProps.height)\n          : null),\n      height:\n        elementProps?.height ??\n        (aspectRatio && typeof elementProps.width === 'number'\n          ? Math.round(aspectRatio * elementProps.width)\n          : null),\n    };\n  }\n\n  //  * 3. `data`'s width/height\n  if (sfapiImage?.width || sfapiImage?.height) {\n    return {\n      // can't calculate the aspect ratio here\n      width: sfapiImage?.width ?? null,\n      height: sfapiImage?.height ?? null,\n    };\n  }\n\n  return {width: null, height: null};\n}\n"],"names":[],"mappings":";;AAKA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsB,CAAC,UAAU;AACvC,MAAM,oBAAoB,CAAC,GAAG,0BAA0B,GAAG,mBAAmB;AAIvE,MAAM,oBAAoB,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AAKrD,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AAChB,QAAA,SAAS,IAAI,IAAI,GAAG;AAE1B,QAAM,kBAAkB,wBAAS;AAEjC,MAAI,OAAO;AACL,QAAA;AAEA,QAAA,OAAO,UAAU,UAAU;AACf,oBAAA,kBAAkB,KAAK,iBAAiB,SAAS;AAAA,IAAA,OAC1D;AACL,oBAAc,OAAO,KAAK,IAAI,iBAAiB,SAAS;AAAA,IAC1D;AAEO,WAAA,aAAa,OAAO,SAAS,UAAU;AAAA,EAChD;AAEI,MAAA,UAAU,OAAO,WAAW,UAAU;AACxC,WAAO,aAAa,OAAO,WAAW,SAAS,iBAAiB,UAAU;AAAA,EAC5E;AAEA,UAAQ,OAAO,aAAa,OAAO,QAAQ,IAAI;AAK/C,SAAO,OAAO;AAChB;AAEO,SAAS,mBAAmB,QAA6B;AAC9D,QAAM,SAAS,IAAI,IAAI,OAAO,GAAG;AACjC,QAAM,uBAAuB,kBAAkB;AAAA,IAAK,CAAC,oBACnD,OAAO,SAAS,SAAS,eAAe;AAAA,EAAA;AAG1C,MACE,CAAC,wBACA,CAAC,OAAO,SAAS,CAAC,OAAO,UAAU,CAAC,OAAO,QAAQ,CAAC,OAAO,OAC5D;AACA,WAAO,OAAO;AAAA,EAChB;AAEA,SAAO,4BAA4B,MAAM;AAC3C;AA+BO,SAAS,0BAA0B;AAAA,EACxC,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAAyE;;AACvE,MAAI,cAA6B;AAE7B,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AAC7B,mBAAA,yCAAY,UAAQ,yCAAY;AAAA,EAChD;AAGI,OAAA,+CAAe,WAAS,+CAAe,SAAQ;AAC1C,WAAA;AAAA,MACL,QACE,oDAAe,UAAf,YACC,eAAe,OAAO,cAAc,WAAW,WAC5C,KAAK,MAAM,cAAc,cAAc,MAAM,IAC7C;AAAA,MACN,SACE,oDAAe,WAAf,YACC,eAAe,OAAO,cAAc,UAAU,WAC3C,KAAK,MAAM,cAAc,cAAc,KAAK,IAC5C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,6CAAc,WAAS,6CAAc,SAAQ;AACxC,WAAA;AAAA,MACL,QACE,kDAAc,UAAd,YACC,eAAe,OAAO,aAAa,WAAW,WAC3C,KAAK,MAAM,cAAc,aAAa,MAAM,IAC5C;AAAA,MACN,SACE,kDAAc,WAAd,YACC,eAAe,OAAO,aAAa,UAAU,WAC1C,KAAK,MAAM,cAAc,aAAa,KAAK,IAC3C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AACpC,WAAA;AAAA,MAEL,QAAO,8CAAY,UAAZ,YAAqB;AAAA,MAC5B,SAAQ,8CAAY,WAAZ,YAAsB;AAAA,IAAA;AAAA,EAElC;AAEA,SAAO,EAAC,OAAO,MAAM,QAAQ,KAAI;AACnC;;;;;"}
+{"version":3,"file":"image-size.mjs","sources":["../../src/image-size.ts"],"sourcesContent":["import type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ShopifyLoaderOptions, ShopifyLoaderParams} from './Image.js';\n\n// TODO: Are there other CDNs missing from here?\nconst PRODUCTION_CDN_HOSTNAMES = [\n  'cdn.shopify.com',\n  'cdn.shopifycdn.net',\n  'shopify-assets.shopifycdn.com',\n  'shopify-assets.shopifycdn.net',\n];\nconst LOCAL_CDN_HOSTNAMES = ['spin.dev'];\nconst ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];\n\n// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions\n// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag\nexport const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];\n\n/**\n * Adds image size parameters to an image URL hosted by Shopify's CDN\n */\nexport function addImageSizeParametersToUrl({\n  src,\n  width,\n  height,\n  crop,\n  scale,\n}: ShopifyLoaderParams) {\n  const newUrl = new URL(src);\n\n  const multipliedScale = scale ?? 1;\n\n  if (width) {\n    let finalWidth: string;\n\n    if (typeof width === 'string') {\n      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();\n    } else {\n      finalWidth = (Number(width) * multipliedScale).toString();\n    }\n\n    newUrl.searchParams.append('width', finalWidth);\n  }\n\n  if (height && typeof height === 'number') {\n    newUrl.searchParams.append('height', (height * multipliedScale).toString());\n  }\n\n  crop && newUrl.searchParams.append('crop', crop);\n\n  // for now we intentionally leave off the scale param, and instead multiple width & height by scale instead\n  // scale && newUrl.searchParams.append('scale', scale.toString());\n\n  return newUrl.toString();\n}\n\nexport function shopifyImageLoader(params: ShopifyLoaderParams) {\n  const newSrc = new URL(params.src);\n  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some((allowedHostname) =>\n    newSrc.hostname.endsWith(allowedHostname)\n  );\n\n  if (\n    !isShopifyServedImage ||\n    (!params.width && !params.height && !params.crop && !params.scale)\n  ) {\n    return params.src;\n  }\n\n  return addImageSizeParametersToUrl(params);\n}\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type GetShopifyImageDimensionsProps = {\n  data: Pick<\n    PartialDeep<ImageType, {recurseIntoArrays: true}>,\n    'altText' | 'url' | 'id' | 'width' | 'height'\n  >;\n  loaderOptions?: ShopifyLoaderOptions;\n  elementProps?: {\n    width?: HtmlImageProps['width'];\n    height?: HtmlImageProps['height'];\n  };\n};\n\ntype GetShopifyImageDimensionsPropsReturn = {\n  width: number | string | null;\n  height: number | string | null;\n};\n\n/**\n * Width and height are determined using the followiing priority list:\n * 1. `loaderOptions`'s width/height\n * 2. `elementProps`'s width/height\n * 3. `data`'s width/height\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the Image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If not, then the aspect ratio cannot be determined and the missing\n * value will reamin as `null`\n */\nexport function getShopifyImageDimensions({\n  data: sfapiImage,\n  loaderOptions,\n  elementProps,\n}: GetShopifyImageDimensionsProps): GetShopifyImageDimensionsPropsReturn {\n  let aspectRatio: number | null = null;\n\n  if (sfapiImage?.width && sfapiImage?.height) {\n    aspectRatio = sfapiImage?.width / sfapiImage?.height;\n  }\n\n  //  * 1. `loaderOptions`'s width/height\n  if (loaderOptions?.width || loaderOptions?.height) {\n    return {\n      width:\n        loaderOptions?.width ??\n        (aspectRatio && typeof loaderOptions.height === 'number'\n          ? Math.round(aspectRatio * loaderOptions.height)\n          : null),\n      height:\n        loaderOptions?.height ??\n        (aspectRatio && typeof loaderOptions.width === 'number'\n          ? Math.round(aspectRatio * loaderOptions.width)\n          : null),\n    };\n  }\n\n  //  * 2. `elementProps`'s width/height\n  if (elementProps?.width || elementProps?.height) {\n    return {\n      width:\n        elementProps?.width ??\n        (aspectRatio && typeof elementProps.height === 'number'\n          ? Math.round(aspectRatio * elementProps.height)\n          : null),\n      height:\n        elementProps?.height ??\n        (aspectRatio && typeof elementProps.width === 'number'\n          ? Math.round(aspectRatio * elementProps.width)\n          : null),\n    };\n  }\n\n  //  * 3. `data`'s width/height\n  if (sfapiImage?.width || sfapiImage?.height) {\n    return {\n      // can't calculate the aspect ratio here\n      width: sfapiImage?.width ?? null,\n      height: sfapiImage?.height ?? null,\n    };\n  }\n\n  return {width: null, height: null};\n}\n"],"names":[],"mappings":"AAKA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACA,MAAM,sBAAsB,CAAC,UAAU;AACvC,MAAM,oBAAoB,CAAC,GAAG,0BAA0B,GAAG,mBAAmB;AAIvE,MAAM,oBAAoB,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI;AAKrD,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AAChB,QAAA,SAAS,IAAI,IAAI,GAAG;AAE1B,QAAM,kBAAkB,wBAAS;AAEjC,MAAI,OAAO;AACL,QAAA;AAEA,QAAA,OAAO,UAAU,UAAU;AACf,oBAAA,kBAAkB,KAAK,iBAAiB,SAAS;AAAA,IAAA,OAC1D;AACL,oBAAc,OAAO,KAAK,IAAI,iBAAiB,SAAS;AAAA,IAC1D;AAEO,WAAA,aAAa,OAAO,SAAS,UAAU;AAAA,EAChD;AAEI,MAAA,UAAU,OAAO,WAAW,UAAU;AACxC,WAAO,aAAa,OAAO,WAAW,SAAS,iBAAiB,UAAU;AAAA,EAC5E;AAEA,UAAQ,OAAO,aAAa,OAAO,QAAQ,IAAI;AAK/C,SAAO,OAAO;AAChB;AAEO,SAAS,mBAAmB,QAA6B;AAC9D,QAAM,SAAS,IAAI,IAAI,OAAO,GAAG;AACjC,QAAM,uBAAuB,kBAAkB;AAAA,IAAK,CAAC,oBACnD,OAAO,SAAS,SAAS,eAAe;AAAA,EAAA;AAG1C,MACE,CAAC,wBACA,CAAC,OAAO,SAAS,CAAC,OAAO,UAAU,CAAC,OAAO,QAAQ,CAAC,OAAO,OAC5D;AACA,WAAO,OAAO;AAAA,EAChB;AAEA,SAAO,4BAA4B,MAAM;AAC3C;AA+BO,SAAS,0BAA0B;AAAA,EACxC,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAAyE;AApGzE;AAqGE,MAAI,cAA6B;AAE7B,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AAC7B,mBAAA,yCAAY,UAAQ,yCAAY;AAAA,EAChD;AAGI,OAAA,+CAAe,WAAS,+CAAe,SAAQ;AAC1C,WAAA;AAAA,MACL,QACE,oDAAe,UAAf,YACC,eAAe,OAAO,cAAc,WAAW,WAC5C,KAAK,MAAM,cAAc,cAAc,MAAM,IAC7C;AAAA,MACN,SACE,oDAAe,WAAf,YACC,eAAe,OAAO,cAAc,UAAU,WAC3C,KAAK,MAAM,cAAc,cAAc,KAAK,IAC5C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,6CAAc,WAAS,6CAAc,SAAQ;AACxC,WAAA;AAAA,MACL,QACE,kDAAc,UAAd,YACC,eAAe,OAAO,aAAa,WAAW,WAC3C,KAAK,MAAM,cAAc,aAAa,MAAM,IAC5C;AAAA,MACN,SACE,kDAAc,WAAd,YACC,eAAe,OAAO,aAAa,UAAU,WAC1C,KAAK,MAAM,cAAc,aAAa,KAAK,IAC3C;AAAA,IAAA;AAAA,EAEV;AAGI,OAAA,yCAAY,WAAS,yCAAY,SAAQ;AACpC,WAAA;AAAA,MAEL,QAAO,8CAAY,UAAZ,YAAqB;AAAA,MAC5B,SAAQ,8CAAY,WAAZ,YAAsB;AAAA,IAAA;AAAA,EAElC;AAEA,SAAO,EAAC,OAAO,MAAM,QAAQ,KAAI;AACnC;"}

package/dist/browser-prod/index.mjs

@@ -0,0 +1,46 @@
+import { AddToCartButton } from "./AddToCartButton.mjs";
+import { BuyNowButton } from "./BuyNowButton.mjs";
+import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
+import { CartProvider, useCart } from "./CartProvider.mjs";
+import { ExternalVideo } from "./ExternalVideo.mjs";
+import { flattenConnection } from "./flatten-connection.mjs";
+import { Image } from "./Image.mjs";
+import { MediaFile } from "./MediaFile.mjs";
+import { metafieldParser } from "./metafield-parser.mjs";
+import { Metafield, parseMetafield, parseMetafieldValue } from "./Metafield.mjs";
+import { ModelViewer } from "./ModelViewer.mjs";
+import { Money } from "./Money.mjs";
+import { ProductPrice } from "./ProductPrice.mjs";
+import { ProductProvider, useProduct } from "./ProductProvider.mjs";
+import { ShopifyProvider, useShop } from "./ShopifyProvider.mjs";
+import { ShopPayButton } from "./ShopPayButton.mjs";
+import { createStorefrontClient } from "./storefront-client.mjs";
+import { useMoney } from "./useMoney.mjs";
+import { Video } from "./Video.mjs";
+export {
+  AddToCartButton,
+  BuyNowButton,
+  CartCheckoutButton,
+  CartProvider,
+  ExternalVideo,
+  Image,
+  MediaFile,
+  Metafield,
+  ModelViewer,
+  Money,
+  ProductPrice,
+  ProductProvider,
+  ShopPayButton,
+  ShopifyProvider,
+  Video,
+  createStorefrontClient,
+  flattenConnection,
+  metafieldParser,
+  parseMetafield,
+  parseMetafieldValue,
+  useCart,
+  useMoney,
+  useProduct,
+  useShop
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser-prod/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/browser-prod/{load-script.js → load-script.mjs}

@@ -49,4 +49,4 @@ export {
   loadScript,
   useLoadScript
 };
-//# sourceMappingURL=load-script.js.map
+//# sourceMappingURL=load-script.mjs.map

package/dist/{node-dev/load-script.cjs.map → browser-prod/load-script.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"load-script.cjs","sources":["../../src/load-script.tsx"],"sourcesContent":["import {useState, useEffect} from 'react';\n\nconst SCRIPTS_LOADED: Record<string, Promise<boolean>> = {};\n\nexport function loadScript(\n  src: string,\n  options?: {module?: boolean; in?: 'head' | 'body'}\n): Promise<boolean> {\n  const isScriptLoaded: Promise<boolean> = SCRIPTS_LOADED[src];\n\n  if (isScriptLoaded) {\n    return isScriptLoaded;\n  }\n\n  const promise = new Promise<boolean>((resolve, reject) => {\n    const script = document.createElement('script');\n    if (options?.module) {\n      script.type = 'module';\n    } else {\n      script.type = 'text/javascript';\n    }\n    script.src = src;\n    script.onload = () => {\n      resolve(true);\n    };\n    script.onerror = () => {\n      reject(false);\n    };\n    if (options?.in === 'head') {\n      document.head.appendChild(script);\n    } else {\n      document.body.appendChild(script);\n    }\n  });\n\n  SCRIPTS_LOADED[src] = promise;\n\n  return promise;\n}\n\ntype LoadScriptParams = Parameters<typeof loadScript>;\n\n/**\n * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.\n */\nexport function useLoadScript(\n  url: LoadScriptParams[0],\n  options?: LoadScriptParams[1]\n): ScriptState {\n  const [status, setStatus] = useState<ScriptState>('loading');\n  const stringifiedOptions = JSON.stringify(options);\n\n  useEffect(() => {\n    async function loadScriptWrapper() {\n      try {\n        setStatus('loading');\n        await loadScript(url, options);\n        setStatus('done');\n      } catch (error) {\n        setStatus('error');\n      }\n    }\n\n    loadScriptWrapper();\n  }, [url, stringifiedOptions, options]);\n\n  return status;\n}\n\ntype ScriptState = 'loading' | 'done' | 'error';\n"],"names":["SCRIPTS_LOADED","loadScript","src","options","isScriptLoaded","promise","Promise","resolve","reject","script","document","createElement","module","type","onload","onerror","in","head","appendChild","body","useLoadScript","url","status","setStatus","useState","stringifiedOptions","JSON","stringify","useEffect","loadScriptWrapper","error"],"mappings":";;;AAEA,MAAMA,iBAAmD,CAAA;AAEzCC,SAAAA,WACdC,KACAC,SACkB;AAClB,QAAMC,iBAAmCJ,eAAeE;AAExD,MAAIE,gBAAgB;AACXA,WAAAA;AAAAA,EACR;AAED,QAAMC,UAAU,IAAIC,QAAiB,CAACC,SAASC,WAAW;AAClDC,UAAAA,SAASC,SAASC,cAAc,QAAvB;AACf,QAAIR,mCAASS,QAAQ;AACnBH,aAAOI,OAAO;AAAA,IAAA,OACT;AACLJ,aAAOI,OAAO;AAAA,IACf;AACDJ,WAAOP,MAAMA;AACbO,WAAOK,SAAS,MAAM;AACpBP,cAAQ,IAAD;AAAA,IAAA;AAETE,WAAOM,UAAU,MAAM;AACrBP,aAAO,KAAD;AAAA,IAAA;AAEJL,SAAAA,mCAASa,QAAO,QAAQ;AACjBC,eAAAA,KAAKC,YAAYT,MAA1B;AAAA,IAAA,OACK;AACIU,eAAAA,KAAKD,YAAYT,MAA1B;AAAA,IACD;AAAA,EAAA,CAlBa;AAqBhBT,iBAAeE,OAAOG;AAEfA,SAAAA;AACR;AAOee,SAAAA,cACdC,KACAlB,SACa;AACb,QAAM,CAACmB,QAAQC,SAAT,IAAsBC,eAAsB,SAAd;AAC9BC,QAAAA,qBAAqBC,KAAKC,UAAUxB,OAAf;AAE3ByB,QAAAA,UAAU,MAAM;AACd,mBAAeC,oBAAoB;AAC7B,UAAA;AACFN,kBAAU,SAAD;AACHtB,cAAAA,WAAWoB,KAAKlB,OAAN;AAChBoB,kBAAU,MAAD;AAAA,eACFO;AACPP,kBAAU,OAAD;AAAA,MACV;AAAA,IACF;AAEgB;EAChB,GAAA,CAACF,KAAKI,oBAAoBtB,OAA1B,CAZM;AAcFmB,SAAAA;AACR;;;"}
+{"version":3,"file":"load-script.mjs","sources":["../../src/load-script.tsx"],"sourcesContent":["import {useState, useEffect} from 'react';\n\nconst SCRIPTS_LOADED: Record<string, Promise<boolean>> = {};\n\nexport function loadScript(\n  src: string,\n  options?: {module?: boolean; in?: 'head' | 'body'}\n): Promise<boolean> {\n  const isScriptLoaded: Promise<boolean> = SCRIPTS_LOADED[src];\n\n  if (isScriptLoaded) {\n    return isScriptLoaded;\n  }\n\n  const promise = new Promise<boolean>((resolve, reject) => {\n    const script = document.createElement('script');\n    if (options?.module) {\n      script.type = 'module';\n    } else {\n      script.type = 'text/javascript';\n    }\n    script.src = src;\n    script.onload = () => {\n      resolve(true);\n    };\n    script.onerror = () => {\n      reject(false);\n    };\n    if (options?.in === 'head') {\n      document.head.appendChild(script);\n    } else {\n      document.body.appendChild(script);\n    }\n  });\n\n  SCRIPTS_LOADED[src] = promise;\n\n  return promise;\n}\n\ntype LoadScriptParams = Parameters<typeof loadScript>;\n\n/**\n * The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load large third-party dependencies.\n */\nexport function useLoadScript(\n  url: LoadScriptParams[0],\n  options?: LoadScriptParams[1]\n): ScriptState {\n  const [status, setStatus] = useState<ScriptState>('loading');\n  const stringifiedOptions = JSON.stringify(options);\n\n  useEffect(() => {\n    async function loadScriptWrapper() {\n      try {\n        setStatus('loading');\n        await loadScript(url, options);\n        setStatus('done');\n      } catch (error) {\n        setStatus('error');\n      }\n    }\n\n    loadScriptWrapper();\n  }, [url, stringifiedOptions, options]);\n\n  return status;\n}\n\ntype ScriptState = 'loading' | 'done' | 'error';\n"],"names":["SCRIPTS_LOADED","loadScript","src","options","isScriptLoaded","promise","Promise","resolve","reject","script","document","createElement","module","type","onload","onerror","in","head","appendChild","body","useLoadScript","url","status","setStatus","useState","stringifiedOptions","JSON","stringify","useEffect","loadScriptWrapper","error"],"mappings":";AAEA,MAAMA,iBAAmD,CAAA;AAEzCC,SAAAA,WACdC,KACAC,SACkB;AAClB,QAAMC,iBAAmCJ,eAAeE;AAExD,MAAIE,gBAAgB;AACXA,WAAAA;AAAAA,EACR;AAED,QAAMC,UAAU,IAAIC,QAAiB,CAACC,SAASC,WAAW;AAClDC,UAAAA,SAASC,SAASC,cAAc,QAAvB;AACf,QAAIR,mCAASS,QAAQ;AACnBH,aAAOI,OAAO;AAAA,IAAA,OACT;AACLJ,aAAOI,OAAO;AAAA,IACf;AACDJ,WAAOP,MAAMA;AACbO,WAAOK,SAAS,MAAM;AACpBP,cAAQ,IAAD;AAAA,IAAA;AAETE,WAAOM,UAAU,MAAM;AACrBP,aAAO,KAAD;AAAA,IAAA;AAEJL,SAAAA,mCAASa,QAAO,QAAQ;AACjBC,eAAAA,KAAKC,YAAYT,MAA1B;AAAA,IAAA,OACK;AACIU,eAAAA,KAAKD,YAAYT,MAA1B;AAAA,IACD;AAAA,EAAA,CAlBa;AAqBhBT,iBAAeE,OAAOG;AAEfA,SAAAA;AACR;AAOee,SAAAA,cACdC,KACAlB,SACa;AACb,QAAM,CAACmB,QAAQC,SAAT,IAAsBC,SAAsB,SAAd;AAC9BC,QAAAA,qBAAqBC,KAAKC,UAAUxB,OAAf;AAE3ByB,YAAU,MAAM;AACd,mBAAeC,oBAAoB;AAC7B,UAAA;AACFN,kBAAU,SAAD;AACHtB,cAAAA,WAAWoB,KAAKlB,OAAN;AAChBoB,kBAAU,MAAD;AAAA,eACFO;AACPP,kBAAU,OAAD;AAAA,MACV;AAAA,IACF;AAEgB;EAChB,GAAA,CAACF,KAAKI,oBAAoBtB,OAA1B,CAZM;AAcFmB,SAAAA;AACR;"}

package/dist/browser-prod/{metafield-parser.js → metafield-parser.mjs}

@@ -1,5 +1,5 @@
-import { parseJSON } from "./Metafield.js";
-import { flattenConnection } from "./flatten-connection.js";
+import { parseJSON } from "./Metafield.mjs";
+import { flattenConnection } from "./flatten-connection.mjs";
 function metafieldParser(metafield) {
   var _a, _b, _c, _d;
   if (!metafield.type) {
@@ -111,4 +111,4 @@ function metafieldParser(metafield) {
 export {
   metafieldParser
 };
-//# sourceMappingURL=metafield-parser.js.map
+//# sourceMappingURL=metafield-parser.mjs.map