@shopify/hydrogen-react 2026.4.1 → 2026.4.2

package/dist/node-dev/RichText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.mjs","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\n/** @publicDocs */\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"names":[],"mappings":";;;AAmBO,SAAS,SAA6D;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,MAAI;AACF,UAAM,UAAU,MAAM;AACtB,UAAM,aAAa;AAAA,MACjB,MAAM,KAAK,MAAM,IAAI;AAAA,MACrB,CAAC,IAAI;AAAA,IAAA;AAGP,WACE,oBAAC,SAAA,EAAS,GAAG,kBACV,UAAA,QACG,iBAAiB,UAAU,IAC3B,yBAAyB,YAAY,UAAU,EAAA,CACrD;AAAA,EAEJ,SAAS,GAAG;AACV,UAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,QACE,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAUA,SAAS,yBACP,aAA+B,CAAA,GAC/B,MACA,QAAQ,GACG;AACX,MAAI;AACJ,MAAI,cAAc,MAAM;AACtB,eAAW,KAAK,SAAS;AAAA,MAAI,CAAC,OAAO,eACnC,yBAAyB,YAAY,OAAO,UAAU;AAAA,IAAA;AAAA,EAE1D;AAEA,QAAM,YACJ,WAAW,KAAK,SAAS,cAAc,aAAa,KAAK,IAAI,KAC7D,mBAAmB,KAAK,IAAI;AAE9B,UAAQ,KAAK,MAAA;AAAA,IACX,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK,QAAQ;AACX,YAAM,YAAY,KAAK,SAAS,IAC7B,MAAM,IAAI,EACV,QAAQ,CAAC,OAAO,aAAa;AAC5B,cAAM,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,QAAQ;AACzC,cAAM,cAAc;AAAA,UAClB;AAAA,UACA;AAAA,YACE;AAAA,YACA,MAAM;AAAA,cACJ,MAAM;AAAA,cACN,QAAQ,KAAK;AAAA,cACb,MAAM,KAAK;AAAA,cACX;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAIF,eAAO,aAAa,IAChB,cACA,CAAC,cAAc,MAAM,EAAC,KAAK,GAAG,GAAG,MAAA,CAAM,GAAG,WAAW;AAAA,MAC3D,CAAC;AAEH,aAAO,SAAS,SAAS,IACrB,cAAc,UAAU,EAAC,KAAK,MAAA,GAAQ,QAAQ,IAC9C,SAAS,CAAC;AAAA,IAChB;AAAA,IACA,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,KAAK,KAAK;AAAA,YACV,OAAO,KAAK;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,UAAU,KAAK;AAAA,YACf;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,EACF;AAEN;AAEA,SAAS,iBACP,MACA,SAAmB,IACX;AACR,UAAQ,KAAK,MAAA;AAAA,IACX,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE;AAAA,IACF,KAAK;AAAA,IACL,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE,aAAO,KAAK,GAAG;AACf;AAAA,IACF,KAAK;AACH,aAAO,KAAK,KAAK,SAAS,EAAE;AAC5B;AAAA,IACF,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE;AAAA,IACF,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,SAAS;AAC9B,YAAI,KAAK,UAAU;AACjB,eAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAAA,QAClE;AACA,eAAO,KAAK,GAAG;AAAA,MACjB,CAAC;AACD;AAAA,IACF;AACE,YAAM,IAAI,MAAM,4BAA4B,KAAK,IAAI,EAAE;AAAA,EAAA;AAG3D,SAAO,OAAO,KAAK,EAAE,EAAE,KAAA;AACzB;"}
+{"version":3,"file":"RichText.mjs","names":[],"sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\n/** @publicDocs */\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"mappings":";;;;;AAmBA,SAAgB,SAA6D,EAC3E,IACA,MACA,OACA,YACA,GAAG,oBAC4C;AAC/C,KAAI;EACF,MAAM,UAAU,MAAM;EACtB,MAAM,aAAa,cACX,KAAK,MAAM,KAAK,EACtB,CAAC,KAAK,CACP;AAED,SACE,oBAAC,SAAD;GAAS,GAAI;aACV,QACG,iBAAiB,WAAW,GAC5B,yBAAyB,YAAY,WAAW;GAC5C,CAAA;UAEL,GAAG;AACV,QAAM,IAAI,MACR,6FACA,EACE,OAAO,GACR,CACF;;;AAYL,SAAS,yBACP,aAA+B,EAAE,EACjC,MACA,QAAQ,GACG;CACX,IAAI;AACJ,KAAI,cAAc,KAChB,YAAW,KAAK,SAAS,KAAK,OAAO,eACnC,yBAAyB,YAAY,OAAO,WAAW,CACxD;CAGH,MAAM,YACJ,WAAW,KAAK,SAAS,cAAc,aAAa,KAAK,SACzD,mBAAmB,KAAK;AAE1B,SAAQ,KAAK,MAAb;EACE,KAAK,OACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN;IACD;GACF,CACF;EACH,KAAK,UACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN,OAAO,KAAK;IACZ;IACD;GACF,CACF;EACH,KAAK,YACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN;IACD;GACF,CACF;EACH,KAAK,QAAQ;GACX,MAAM,YAAY,KAAK,SAAS,IAC7B,MAAM,KAAK,CACX,SAAS,OAAO,aAAa;IAC5B,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG;IACjC,MAAM,cAAc,cAClB,WACA;KACE;KACA,MAAM;MACJ,MAAM;MACN,QAAQ,KAAK;MACb,MAAM,KAAK;MACX;MACD;KACF,CACF;AAGD,WAAO,aAAa,IAChB,cACA,CAAC,cAAc,MAAM,EAAC,KAAK,GAAG,IAAI,MAAK,CAAC,EAAE,YAAY;KAC1D;AAEJ,UAAO,SAAS,SAAS,IACrB,cAAc,UAAU,EAAC,KAAK,OAAM,EAAE,SAAS,GAC/C,SAAS;;EAEf,KAAK,OACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN,KAAK,KAAK;IACV,OAAO,KAAK;IACZ,QAAQ,KAAK;IACb;IACD;GACF,CACF;EACH,KAAK,OACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN,UAAU,KAAK;IACf;IACD;GACF,CACF;EACH,KAAK,YACH,QAAO,cACL,WACA;GACE,KAAK;GACL,MAAM;IACJ,MAAM;IACN;IACD;GACF,CACF;;;AAIP,SAAS,iBACP,MACA,SAAmB,EAAE,EACb;AACR,SAAQ,KAAK,MAAb;EACE,KAAK;AACH,QAAK,SAAS,SAAS,UAAU,iBAAiB,OAAO,OAAO,CAAC;AACjE;EACF,KAAK;EACL,KAAK;AACH,QAAK,SAAS,SAAS,UAAU,iBAAiB,OAAO,OAAO,CAAC;AACjE,UAAO,KAAK,IAAI;AAChB;EACF,KAAK;AACH,UAAO,KAAK,KAAK,SAAS,GAAG;AAC7B;EACF,KAAK;AACH,QAAK,SAAS,SAAS,UAAU,iBAAiB,OAAO,OAAO,CAAC;AACjE;EACF,KAAK;AACH,QAAK,SAAS,SAAS,SAAS;AAC9B,QAAI,KAAK,SACP,MAAK,SAAS,SAAS,UAAU,iBAAiB,OAAO,OAAO,CAAC;AAEnE,WAAO,KAAK,IAAI;KAChB;AACF;EACF,QACE,OAAM,IAAI,MAAM,4BAA4B,KAAK,OAAO;;AAG5D,QAAO,OAAO,KAAK,GAAG,CAAC,MAAM"}

package/dist/node-dev/ShopPayButton.js

@@ -1,85 +1,58 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ShopifyProvider = require("./ShopifyProvider.js");
-const loadScript = require("./load-script.js");
-const analyticsUtils = require("./analytics-utils.js");
-const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
+require("./_virtual/_rolldown/runtime.js");
+const require_ShopifyProvider = require("./ShopifyProvider.js");
+const require_analytics_utils = require("./analytics-utils.js");
+const require_load_script = require("./load-script.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ShopPayButton.tsx
+var SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
 function isChannel(channel) {
-  return channel === "headless" || channel === "hydrogen";
+	return channel === "headless" || channel === "hydrogen";
 }
-function ShopPayButton({
-  channel,
-  variantIds,
-  className,
-  variantIdsAndQuantities,
-  width,
-  storeDomain: _storeDomain
-}) {
-  const shop = ShopifyProvider.useShop();
-  const storeDomain = _storeDomain || (shop == null ? void 0 : shop.storeDomain);
-  const shopPayLoadedStatus = loadScript.useLoadScript(SHOPJS_URL);
-  let ids = [];
-  let channelAttribution;
-  if (!storeDomain || storeDomain === ShopifyProvider.defaultShopifyContext.storeDomain) {
-    throw new Error(MissingStoreDomainErrorMessage);
-  }
-  if (variantIds && variantIdsAndQuantities) {
-    throw new Error(DoublePropsErrorMessage);
-  }
-  if (!variantIds && !variantIdsAndQuantities) {
-    throw new Error(MissingPropsErrorMessage);
-  }
-  if (channel) {
-    if (isChannel(channel)) {
-      channelAttribution = channel;
-    } else {
-      throw new Error(InvalidChannelErrorMessage);
-    }
-  }
-  if (variantIds) {
-    ids = variantIds.reduce((prev, curr) => {
-      const bareId = analyticsUtils.parseGid(curr).id;
-      if (bareId) {
-        prev.push(bareId);
-      }
-      return prev;
-    }, []);
-  } else if (variantIdsAndQuantities) {
-    ids = variantIdsAndQuantities.reduce((prev, curr) => {
-      const bareId = analyticsUtils.parseGid(curr == null ? void 0 : curr.id).id;
-      if (bareId) {
-        prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
-      }
-      return prev;
-    }, []);
-  } else {
-    throw new Error(MissingPropsErrorMessage);
-  }
-  if (ids.length === 0) {
-    throw new Error(InvalidPropsErrorMessage);
-  }
-  const style = width ? {
-    "--shop-pay-button-width": width
-  } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: shopPayLoadedStatus === "done" && /* @__PURE__ */ jsxRuntime.jsx(
-    "shop-pay-button",
-    {
-      ...channelAttribution ? { channel: channelAttribution } : {},
-      "store-url": storeDomain,
-      variants: ids.join(",")
-    }
-  ) });
+/**
+* The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+* 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.
+* It relies on the `<ShopProvider>` context provider.
+* @publicDocs
+*/
+function ShopPayButton({ channel, variantIds, className, variantIdsAndQuantities, width, storeDomain: _storeDomain }) {
+	const shop = require_ShopifyProvider.useShop();
+	const storeDomain = _storeDomain || shop?.storeDomain;
+	const shopPayLoadedStatus = require_load_script.useLoadScript(SHOPJS_URL);
+	let ids = [];
+	let channelAttribution;
+	if (!storeDomain || storeDomain === require_ShopifyProvider.defaultShopifyContext.storeDomain) throw new Error(MissingStoreDomainErrorMessage);
+	if (variantIds && variantIdsAndQuantities) throw new Error(DoublePropsErrorMessage);
+	if (!variantIds && !variantIdsAndQuantities) throw new Error(MissingPropsErrorMessage);
+	if (channel) if (isChannel(channel)) channelAttribution = channel;
+	else throw new Error(InvalidChannelErrorMessage);
+	if (variantIds) ids = variantIds.reduce((prev, curr) => {
+		const bareId = require_analytics_utils.parseGid(curr).id;
+		if (bareId) prev.push(bareId);
+		return prev;
+	}, []);
+	else if (variantIdsAndQuantities) ids = variantIdsAndQuantities.reduce((prev, curr) => {
+		const bareId = require_analytics_utils.parseGid(curr?.id).id;
+		if (bareId) prev.push(`${bareId}:${curr?.quantity ?? 1}`);
+		return prev;
+	}, []);
+	else throw new Error(MissingPropsErrorMessage);
+	if (ids.length === 0) throw new Error(InvalidPropsErrorMessage);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		style: width ? { "--shop-pay-button-width": width } : void 0,
+		children: shopPayLoadedStatus === "done" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("shop-pay-button", {
+			...channelAttribution ? { channel: channelAttribution } : {},
+			"store-url": storeDomain,
+			variants: ids.join(",")
+		})
+	});
 }
-const MissingStoreDomainErrorMessage = 'You must pass a "storeDomain" prop to the "ShopPayButton" component, or wrap it in a "ShopifyProvider" component.';
-const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
-const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
-const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
-const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
-exports.DoublePropsErrorMessage = DoublePropsErrorMessage;
-exports.InvalidChannelErrorMessage = InvalidChannelErrorMessage;
-exports.InvalidPropsErrorMessage = InvalidPropsErrorMessage;
-exports.MissingPropsErrorMessage = MissingPropsErrorMessage;
-exports.MissingStoreDomainErrorMessage = MissingStoreDomainErrorMessage;
+var MissingStoreDomainErrorMessage = "You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.";
+var InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
+var MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+var DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
+var InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
+//#endregion
 exports.ShopPayButton = ShopPayButton;
-//# sourceMappingURL=ShopPayButton.js.map
+
+//# sourceMappingURL=ShopPayButton.js.map

package/dist/node-dev/ShopPayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShopPayButton.js","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.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 = ShopPayButtonStyleProps &\n  ShopPayDomainProps &\n  ShopPayChannelAttribution &\n  (ShopPayVariantIds | ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\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\ntype ShopPayDomainProps = {\n  /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). */\n  storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\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\ntype ShopPayVariantAndQuantities = {\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\ntype ShopPayChannelAttribution = {\n  /** A string that adds channel attribution to the order. Can be either `headless` or `hydrogen` */\n  channel?: 'headless' | 'hydrogen';\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        channel?: string;\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\nfunction isChannel(\n  channel: string,\n): channel is Exclude<ShopPayChannelAttribution['channel'], undefined> {\n  return channel === 'headless' || channel === 'hydrogen';\n}\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 * @publicDocs\n */\nexport function ShopPayButton({\n  channel,\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n  storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n  const shop = useShop();\n  const storeDomain = _storeDomain || shop?.storeDomain;\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[] = [];\n  let channelAttribution: string | undefined;\n\n  if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {\n    throw new Error(MissingStoreDomainErrorMessage);\n  }\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (!variantIds && !variantIdsAndQuantities) {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  if (channel) {\n    if (isChannel(channel)) {\n      channelAttribution = channel;\n    } else {\n      throw new Error(InvalidChannelErrorMessage);\n    }\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = parseGid(curr).id;\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 = parseGid(curr?.id).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  if (ids.length === 0) {\n    throw new Error(InvalidPropsErrorMessage);\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          {...(channelAttribution ? {channel: channelAttribution} : {})}\n          store-url={storeDomain}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const MissingStoreDomainErrorMessage =\n  'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\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`;\nexport const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either \"headless\" or \"hydrogen\"`;\n"],"names":["useShop","useLoadScript","defaultShopifyContext","parseGid","jsx"],"mappings":";;;;;;AAyDA,MAAM,aACJ;AAEF,SAAS,UACP,SACqE;AACrE,SAAO,YAAY,cAAc,YAAY;AAC/C;AAQO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAoC;AAClC,QAAM,OAAOA,gBAAAA,QAAA;AACb,QAAM,cAAc,iBAAgB,6BAAM;AAC1C,QAAM,sBAAsBC,WAAAA,cAAc,UAAU;AAEpD,MAAI,MAAgB,CAAA;AACpB,MAAI;AAEJ,MAAI,CAAC,eAAe,gBAAgBC,gBAAAA,sBAAsB,aAAa;AACrE,UAAM,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,MAAI,cAAc,yBAAyB;AACzC,UAAM,IAAI,MAAM,uBAAuB;AAAA,EACzC;AAEA,MAAI,CAAC,cAAc,CAAC,yBAAyB;AAC3C,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,QAAI,UAAU,OAAO,GAAG;AACtB,2BAAqB;AAAA,IACvB,OAAO;AACL,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AAAA,EACF;AAEA,MAAI,YAAY;AACd,UAAM,WAAW,OAAiB,CAAC,MAAM,SAAS;AAChD,YAAM,SAASC,eAAAA,SAAS,IAAI,EAAE;AAC9B,UAAI,QAAQ;AACV,aAAK,KAAK,MAAM;AAAA,MAClB;AACA,aAAO;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EACP,WAAW,yBAAyB;AAClC,UAAM,wBAAwB,OAAiB,CAAC,MAAM,SAAS;AAC7D,YAAM,SAASA,eAAAA,SAAS,6BAAM,EAAE,EAAE;AAClC,UAAI,QAAQ;AACV,aAAK,KAAK,GAAG,MAAM,KAAI,6BAAM,aAAY,CAAC,EAAE;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EACP,OAAO;AACL,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,IAAI,WAAW,GAAG;AACpB,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,QAAM,QAAQ,QACT;AAAA,IACC,2BAA2B;AAAA,EAAA,IAE7B;AAEJ,SACEC,2BAAAA,IAAC,OAAA,EAAI,WAAsB,OACxB,kCAAwB,UACvBA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,qBAAqB,EAAC,SAAS,mBAAA,IAAsB,CAAA;AAAA,MAC1D,aAAW;AAAA,MACX,UAAU,IAAI,KAAK,GAAG;AAAA,IAAA;AAAA,EAAA,GAG5B;AAEJ;AAEO,MAAM,iCACX;AACK,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;;;;;;;"}
+{"version":3,"file":"ShopPayButton.js","names":[],"sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.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 = ShopPayButtonStyleProps &\n  ShopPayDomainProps &\n  ShopPayChannelAttribution &\n  (ShopPayVariantIds | ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\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\ntype ShopPayDomainProps = {\n  /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). */\n  storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\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\ntype ShopPayVariantAndQuantities = {\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\ntype ShopPayChannelAttribution = {\n  /** A string that adds channel attribution to the order. Can be either `headless` or `hydrogen` */\n  channel?: 'headless' | 'hydrogen';\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        channel?: string;\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\nfunction isChannel(\n  channel: string,\n): channel is Exclude<ShopPayChannelAttribution['channel'], undefined> {\n  return channel === 'headless' || channel === 'hydrogen';\n}\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 * @publicDocs\n */\nexport function ShopPayButton({\n  channel,\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n  storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n  const shop = useShop();\n  const storeDomain = _storeDomain || shop?.storeDomain;\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[] = [];\n  let channelAttribution: string | undefined;\n\n  if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {\n    throw new Error(MissingStoreDomainErrorMessage);\n  }\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (!variantIds && !variantIdsAndQuantities) {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  if (channel) {\n    if (isChannel(channel)) {\n      channelAttribution = channel;\n    } else {\n      throw new Error(InvalidChannelErrorMessage);\n    }\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = parseGid(curr).id;\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 = parseGid(curr?.id).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  if (ids.length === 0) {\n    throw new Error(InvalidPropsErrorMessage);\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          {...(channelAttribution ? {channel: channelAttribution} : {})}\n          store-url={storeDomain}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const MissingStoreDomainErrorMessage =\n  'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\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`;\nexport const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either \"headless\" or \"hydrogen\"`;\n"],"mappings":";;;;;;AAyDA,IAAM,aACJ;AAEF,SAAS,UACP,SACqE;AACrE,QAAO,YAAY,cAAc,YAAY;;;;;;;;AAS/C,SAAgB,cAAc,EAC5B,SACA,YACA,WACA,yBACA,OACA,aAAa,gBACqB;CAClC,MAAM,OAAO,wBAAA,SAAS;CACtB,MAAM,cAAc,gBAAgB,MAAM;CAC1C,MAAM,sBAAsB,oBAAA,cAAc,WAAW;CAErD,IAAI,MAAgB,EAAE;CACtB,IAAI;AAEJ,KAAI,CAAC,eAAe,gBAAgB,wBAAA,sBAAsB,YACxD,OAAM,IAAI,MAAM,+BAA+B;AAGjD,KAAI,cAAc,wBAChB,OAAM,IAAI,MAAM,wBAAwB;AAG1C,KAAI,CAAC,cAAc,CAAC,wBAClB,OAAM,IAAI,MAAM,yBAAyB;AAG3C,KAAI,QACF,KAAI,UAAU,QAAQ,CACpB,sBAAqB;KAErB,OAAM,IAAI,MAAM,2BAA2B;AAI/C,KAAI,WACF,OAAM,WAAW,QAAkB,MAAM,SAAS;EAChD,MAAM,SAAS,wBAAA,SAAS,KAAK,CAAC;AAC9B,MAAI,OACF,MAAK,KAAK,OAAO;AAEnB,SAAO;IACN,EAAE,CAAC;UACG,wBACT,OAAM,wBAAwB,QAAkB,MAAM,SAAS;EAC7D,MAAM,SAAS,wBAAA,SAAS,MAAM,GAAG,CAAC;AAClC,MAAI,OACF,MAAK,KAAK,GAAG,OAAO,GAAG,MAAM,YAAY,IAAI;AAE/C,SAAO;IACN,EAAE,CAAC;KAEN,OAAM,IAAI,MAAM,yBAAyB;AAG3C,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,MAAM,yBAAyB;AAS3C,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAgB;EAAkB,OAPtB,QACT,EACC,2BAA2B,OAC5B,GACD,KAAA;YAIC,wBAAwB,UACvB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GACE,GAAK,qBAAqB,EAAC,SAAS,oBAAmB,GAAG,EAAE;GAC5D,aAAW;GACX,UAAU,IAAI,KAAK,IAAI;GACvB,CAAA;EAEA,CAAA;;AAIV,IAAa,iCACX;AACF,IAAa,2BAA2B;AACxC,IAAa,2BAA2B;AACxC,IAAa,0BAA0B;AACvC,IAAa,6BAA6B"}

package/dist/node-dev/ShopPayButton.mjs

@@ -1,85 +1,57 @@
-import { jsx } from "react/jsx-runtime";
-import { useShop, defaultShopifyContext } from "./ShopifyProvider.mjs";
-import { useLoadScript } from "./load-script.mjs";
+import { defaultShopifyContext, useShop } from "./ShopifyProvider.mjs";
 import { parseGid } from "./analytics-utils.mjs";
-const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
+import { useLoadScript } from "./load-script.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/ShopPayButton.tsx
+var SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
 function isChannel(channel) {
-  return channel === "headless" || channel === "hydrogen";
+	return channel === "headless" || channel === "hydrogen";
 }
-function ShopPayButton({
-  channel,
-  variantIds,
-  className,
-  variantIdsAndQuantities,
-  width,
-  storeDomain: _storeDomain
-}) {
-  const shop = useShop();
-  const storeDomain = _storeDomain || (shop == null ? void 0 : shop.storeDomain);
-  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
-  let ids = [];
-  let channelAttribution;
-  if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {
-    throw new Error(MissingStoreDomainErrorMessage);
-  }
-  if (variantIds && variantIdsAndQuantities) {
-    throw new Error(DoublePropsErrorMessage);
-  }
-  if (!variantIds && !variantIdsAndQuantities) {
-    throw new Error(MissingPropsErrorMessage);
-  }
-  if (channel) {
-    if (isChannel(channel)) {
-      channelAttribution = channel;
-    } else {
-      throw new Error(InvalidChannelErrorMessage);
-    }
-  }
-  if (variantIds) {
-    ids = variantIds.reduce((prev, curr) => {
-      const bareId = parseGid(curr).id;
-      if (bareId) {
-        prev.push(bareId);
-      }
-      return prev;
-    }, []);
-  } else if (variantIdsAndQuantities) {
-    ids = variantIdsAndQuantities.reduce((prev, curr) => {
-      const bareId = parseGid(curr == null ? void 0 : curr.id).id;
-      if (bareId) {
-        prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
-      }
-      return prev;
-    }, []);
-  } else {
-    throw new Error(MissingPropsErrorMessage);
-  }
-  if (ids.length === 0) {
-    throw new Error(InvalidPropsErrorMessage);
-  }
-  const style = width ? {
-    "--shop-pay-button-width": width
-  } : void 0;
-  return /* @__PURE__ */ jsx("div", { className, style, children: shopPayLoadedStatus === "done" && /* @__PURE__ */ jsx(
-    "shop-pay-button",
-    {
-      ...channelAttribution ? { channel: channelAttribution } : {},
-      "store-url": storeDomain,
-      variants: ids.join(",")
-    }
-  ) });
+/**
+* The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+* 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.
+* It relies on the `<ShopProvider>` context provider.
+* @publicDocs
+*/
+function ShopPayButton({ channel, variantIds, className, variantIdsAndQuantities, width, storeDomain: _storeDomain }) {
+	const shop = useShop();
+	const storeDomain = _storeDomain || shop?.storeDomain;
+	const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
+	let ids = [];
+	let channelAttribution;
+	if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) throw new Error(MissingStoreDomainErrorMessage);
+	if (variantIds && variantIdsAndQuantities) throw new Error(DoublePropsErrorMessage);
+	if (!variantIds && !variantIdsAndQuantities) throw new Error(MissingPropsErrorMessage);
+	if (channel) if (isChannel(channel)) channelAttribution = channel;
+	else throw new Error(InvalidChannelErrorMessage);
+	if (variantIds) ids = variantIds.reduce((prev, curr) => {
+		const bareId = parseGid(curr).id;
+		if (bareId) prev.push(bareId);
+		return prev;
+	}, []);
+	else if (variantIdsAndQuantities) ids = variantIdsAndQuantities.reduce((prev, curr) => {
+		const bareId = parseGid(curr?.id).id;
+		if (bareId) prev.push(`${bareId}:${curr?.quantity ?? 1}`);
+		return prev;
+	}, []);
+	else throw new Error(MissingPropsErrorMessage);
+	if (ids.length === 0) throw new Error(InvalidPropsErrorMessage);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: width ? { "--shop-pay-button-width": width } : void 0,
+		children: shopPayLoadedStatus === "done" && /* @__PURE__ */ jsx("shop-pay-button", {
+			...channelAttribution ? { channel: channelAttribution } : {},
+			"store-url": storeDomain,
+			variants: ids.join(",")
+		})
+	});
 }
-const MissingStoreDomainErrorMessage = 'You must pass a "storeDomain" prop to the "ShopPayButton" component, or wrap it in a "ShopifyProvider" component.';
-const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
-const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
-const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
-const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
-export {
-  DoublePropsErrorMessage,
-  InvalidChannelErrorMessage,
-  InvalidPropsErrorMessage,
-  MissingPropsErrorMessage,
-  MissingStoreDomainErrorMessage,
-  ShopPayButton
-};
-//# sourceMappingURL=ShopPayButton.mjs.map
+var MissingStoreDomainErrorMessage = "You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.";
+var InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
+var MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+var DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
+var InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
+//#endregion
+export { ShopPayButton };
+
+//# sourceMappingURL=ShopPayButton.mjs.map

package/dist/node-dev/ShopPayButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShopPayButton.mjs","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.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 = ShopPayButtonStyleProps &\n  ShopPayDomainProps &\n  ShopPayChannelAttribution &\n  (ShopPayVariantIds | ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\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\ntype ShopPayDomainProps = {\n  /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). */\n  storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\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\ntype ShopPayVariantAndQuantities = {\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\ntype ShopPayChannelAttribution = {\n  /** A string that adds channel attribution to the order. Can be either `headless` or `hydrogen` */\n  channel?: 'headless' | 'hydrogen';\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        channel?: string;\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\nfunction isChannel(\n  channel: string,\n): channel is Exclude<ShopPayChannelAttribution['channel'], undefined> {\n  return channel === 'headless' || channel === 'hydrogen';\n}\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 * @publicDocs\n */\nexport function ShopPayButton({\n  channel,\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n  storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n  const shop = useShop();\n  const storeDomain = _storeDomain || shop?.storeDomain;\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[] = [];\n  let channelAttribution: string | undefined;\n\n  if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {\n    throw new Error(MissingStoreDomainErrorMessage);\n  }\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (!variantIds && !variantIdsAndQuantities) {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  if (channel) {\n    if (isChannel(channel)) {\n      channelAttribution = channel;\n    } else {\n      throw new Error(InvalidChannelErrorMessage);\n    }\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = parseGid(curr).id;\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 = parseGid(curr?.id).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  if (ids.length === 0) {\n    throw new Error(InvalidPropsErrorMessage);\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          {...(channelAttribution ? {channel: channelAttribution} : {})}\n          store-url={storeDomain}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const MissingStoreDomainErrorMessage =\n  'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\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`;\nexport const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either \"headless\" or \"hydrogen\"`;\n"],"names":[],"mappings":";;;;AAyDA,MAAM,aACJ;AAEF,SAAS,UACP,SACqE;AACrE,SAAO,YAAY,cAAc,YAAY;AAC/C;AAQO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAoC;AAClC,QAAM,OAAO,QAAA;AACb,QAAM,cAAc,iBAAgB,6BAAM;AAC1C,QAAM,sBAAsB,cAAc,UAAU;AAEpD,MAAI,MAAgB,CAAA;AACpB,MAAI;AAEJ,MAAI,CAAC,eAAe,gBAAgB,sBAAsB,aAAa;AACrE,UAAM,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,MAAI,cAAc,yBAAyB;AACzC,UAAM,IAAI,MAAM,uBAAuB;AAAA,EACzC;AAEA,MAAI,CAAC,cAAc,CAAC,yBAAyB;AAC3C,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,SAAS;AACX,QAAI,UAAU,OAAO,GAAG;AACtB,2BAAqB;AAAA,IACvB,OAAO;AACL,YAAM,IAAI,MAAM,0BAA0B;AAAA,IAC5C;AAAA,EACF;AAEA,MAAI,YAAY;AACd,UAAM,WAAW,OAAiB,CAAC,MAAM,SAAS;AAChD,YAAM,SAAS,SAAS,IAAI,EAAE;AAC9B,UAAI,QAAQ;AACV,aAAK,KAAK,MAAM;AAAA,MAClB;AACA,aAAO;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EACP,WAAW,yBAAyB;AAClC,UAAM,wBAAwB,OAAiB,CAAC,MAAM,SAAS;AAC7D,YAAM,SAAS,SAAS,6BAAM,EAAE,EAAE;AAClC,UAAI,QAAQ;AACV,aAAK,KAAK,GAAG,MAAM,KAAI,6BAAM,aAAY,CAAC,EAAE;AAAA,MAC9C;AACA,aAAO;AAAA,IACT,GAAG,CAAA,CAAE;AAAA,EACP,OAAO;AACL,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,IAAI,WAAW,GAAG;AACpB,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,QAAM,QAAQ,QACT;AAAA,IACC,2BAA2B;AAAA,EAAA,IAE7B;AAEJ,SACE,oBAAC,OAAA,EAAI,WAAsB,OACxB,kCAAwB,UACvB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,qBAAqB,EAAC,SAAS,mBAAA,IAAsB,CAAA;AAAA,MAC1D,aAAW;AAAA,MACX,UAAU,IAAI,KAAK,GAAG;AAAA,IAAA;AAAA,EAAA,GAG5B;AAEJ;AAEO,MAAM,iCACX;AACK,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;"}
+{"version":3,"file":"ShopPayButton.mjs","names":[],"sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.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 = ShopPayButtonStyleProps &\n  ShopPayDomainProps &\n  ShopPayChannelAttribution &\n  (ShopPayVariantIds | ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\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\ntype ShopPayDomainProps = {\n  /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). */\n  storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\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\ntype ShopPayVariantAndQuantities = {\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\ntype ShopPayChannelAttribution = {\n  /** A string that adds channel attribution to the order. Can be either `headless` or `hydrogen` */\n  channel?: 'headless' | 'hydrogen';\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'shop-pay-button': {\n        channel?: string;\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\nfunction isChannel(\n  channel: string,\n): channel is Exclude<ShopPayChannelAttribution['channel'], undefined> {\n  return channel === 'headless' || channel === 'hydrogen';\n}\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 * @publicDocs\n */\nexport function ShopPayButton({\n  channel,\n  variantIds,\n  className,\n  variantIdsAndQuantities,\n  width,\n  storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n  const shop = useShop();\n  const storeDomain = _storeDomain || shop?.storeDomain;\n  const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n  let ids: string[] = [];\n  let channelAttribution: string | undefined;\n\n  if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {\n    throw new Error(MissingStoreDomainErrorMessage);\n  }\n\n  if (variantIds && variantIdsAndQuantities) {\n    throw new Error(DoublePropsErrorMessage);\n  }\n\n  if (!variantIds && !variantIdsAndQuantities) {\n    throw new Error(MissingPropsErrorMessage);\n  }\n\n  if (channel) {\n    if (isChannel(channel)) {\n      channelAttribution = channel;\n    } else {\n      throw new Error(InvalidChannelErrorMessage);\n    }\n  }\n\n  if (variantIds) {\n    ids = variantIds.reduce<string[]>((prev, curr) => {\n      const bareId = parseGid(curr).id;\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 = parseGid(curr?.id).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  if (ids.length === 0) {\n    throw new Error(InvalidPropsErrorMessage);\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          {...(channelAttribution ? {channel: channelAttribution} : {})}\n          store-url={storeDomain}\n          variants={ids.join(',')}\n        />\n      )}\n    </div>\n  );\n}\n\nexport const MissingStoreDomainErrorMessage =\n  'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\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`;\nexport const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either \"headless\" or \"hydrogen\"`;\n"],"mappings":";;;;;AAyDA,IAAM,aACJ;AAEF,SAAS,UACP,SACqE;AACrE,QAAO,YAAY,cAAc,YAAY;;;;;;;;AAS/C,SAAgB,cAAc,EAC5B,SACA,YACA,WACA,yBACA,OACA,aAAa,gBACqB;CAClC,MAAM,OAAO,SAAS;CACtB,MAAM,cAAc,gBAAgB,MAAM;CAC1C,MAAM,sBAAsB,cAAc,WAAW;CAErD,IAAI,MAAgB,EAAE;CACtB,IAAI;AAEJ,KAAI,CAAC,eAAe,gBAAgB,sBAAsB,YACxD,OAAM,IAAI,MAAM,+BAA+B;AAGjD,KAAI,cAAc,wBAChB,OAAM,IAAI,MAAM,wBAAwB;AAG1C,KAAI,CAAC,cAAc,CAAC,wBAClB,OAAM,IAAI,MAAM,yBAAyB;AAG3C,KAAI,QACF,KAAI,UAAU,QAAQ,CACpB,sBAAqB;KAErB,OAAM,IAAI,MAAM,2BAA2B;AAI/C,KAAI,WACF,OAAM,WAAW,QAAkB,MAAM,SAAS;EAChD,MAAM,SAAS,SAAS,KAAK,CAAC;AAC9B,MAAI,OACF,MAAK,KAAK,OAAO;AAEnB,SAAO;IACN,EAAE,CAAC;UACG,wBACT,OAAM,wBAAwB,QAAkB,MAAM,SAAS;EAC7D,MAAM,SAAS,SAAS,MAAM,GAAG,CAAC;AAClC,MAAI,OACF,MAAK,KAAK,GAAG,OAAO,GAAG,MAAM,YAAY,IAAI;AAE/C,SAAO;IACN,EAAE,CAAC;KAEN,OAAM,IAAI,MAAM,yBAAyB;AAG3C,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,MAAM,yBAAyB;AAS3C,QACE,oBAAC,OAAD;EAAgB;EAAkB,OAPtB,QACT,EACC,2BAA2B,OAC5B,GACD,KAAA;YAIC,wBAAwB,UACvB,oBAAC,mBAAD;GACE,GAAK,qBAAqB,EAAC,SAAS,oBAAmB,GAAG,EAAE;GAC5D,aAAW;GACX,UAAU,IAAI,KAAK,IAAI;GACvB,CAAA;EAEA,CAAA;;AAIV,IAAa,iCACX;AACF,IAAa,2BAA2B;AACxC,IAAa,2BAA2B;AACxC,IAAa,0BAA0B;AACvC,IAAa,6BAA6B"}

package/dist/node-dev/ShopifyProvider.js

@@ -1,92 +1,82 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const storefrontApiConstants = require("./storefront-api-constants.js");
-const storefrontClient = require("./storefront-client.js");
-const defaultShopifyContext = {
-  storeDomain: "test",
-  storefrontToken: "abc123",
-  storefrontApiVersion: storefrontApiConstants.SFAPI_VERSION,
-  countryIsoCode: "US",
-  languageIsoCode: "EN",
-  getStorefrontApiUrl() {
-    return "";
-  },
-  getPublicTokenHeaders() {
-    return {};
-  },
-  getShopifyDomain() {
-    return "";
-  }
+require("./_virtual/_rolldown/runtime.js");
+const require_storefront_api_constants = require("./storefront-api-constants.js");
+const require_storefront_client = require("./storefront-client.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ShopifyProvider.tsx
+var defaultShopifyContext = {
+	storeDomain: "test",
+	storefrontToken: "abc123",
+	storefrontApiVersion: require_storefront_api_constants.SFAPI_VERSION,
+	countryIsoCode: "US",
+	languageIsoCode: "EN",
+	getStorefrontApiUrl() {
+		return "";
+	},
+	getPublicTokenHeaders() {
+		return {};
+	},
+	getShopifyDomain() {
+		return "";
+	}
 };
-const ShopifyContext = React.createContext(
-  defaultShopifyContext
-);
+var ShopifyContext = (0, react.createContext)(defaultShopifyContext);
+/**
+* Hydrogen server sets this server timing key when the SFAPI proxy is enabled.
+* Read it automatically in the browser for apps using frontend cart in full-stack Hydrogen,
+* but don't export this utility yet since we don't want to make this a public convention.
+*/
 function isSfapiProxyEnabled() {
-  var _a, _b, _c;
-  if (typeof window === "undefined") return false;
-  try {
-    const navigationEntry = (_b = (_a = window.performance) == null ? void 0 : _a.getEntriesByType) == null ? void 0 : _b.call(
-      _a,
-      "navigation"
-    )[0];
-    return !!((_c = navigationEntry == null ? void 0 : navigationEntry.serverTiming) == null ? void 0 : _c.some(
-      (entry) => entry.name === "_sfapi_proxy"
-    ));
-  } catch (e) {
-    return false;
-  }
+	if (typeof window === "undefined") return false;
+	try {
+		return !!(window.performance?.getEntriesByType?.("navigation")[0])?.serverTiming?.some((entry) => entry.name === "_sfapi_proxy");
+	} catch (e) {
+		return false;
+	}
 }
-function ShopifyProvider({
-  children,
-  ...shopifyConfig
-}) {
-  if (!shopifyConfig.countryIsoCode || !shopifyConfig.languageIsoCode || !shopifyConfig.storeDomain || !shopifyConfig.storefrontToken || !shopifyConfig.storefrontApiVersion) {
-    throw new Error(
-      `Please provide the necessary props to '<ShopifyProvider/>'`
-    );
-  }
-  if (shopifyConfig.storefrontApiVersion !== storefrontApiConstants.SFAPI_VERSION) {
-    console.warn(
-      `<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${storefrontApiConstants.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 React and the Storefront API.`
-    );
-  }
-  const finalConfig = React.useMemo(() => {
-    const sameDomainForStorefrontApi = shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();
-    function getShopifyDomain(overrideProps) {
-      const domain = (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain;
-      return domain.includes("://") ? domain : `https://${domain}`;
-    }
-    return {
-      ...shopifyConfig,
-      sameDomainForStorefrontApi,
-      getPublicTokenHeaders(overrideProps) {
-        return storefrontClient.getPublicTokenHeadersRaw(
-          overrideProps.contentType,
-          shopifyConfig.storefrontApiVersion,
-          overrideProps.storefrontToken ?? shopifyConfig.storefrontToken
-        );
-      },
-      getShopifyDomain,
-      getStorefrontApiUrl(overrideProps) {
-        const finalDomainUrl = sameDomainForStorefrontApi && typeof window !== "undefined" ? window.location.origin : getShopifyDomain({
-          storeDomain: (overrideProps == null ? void 0 : overrideProps.storeDomain) ?? shopifyConfig.storeDomain
-        });
-        return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${(overrideProps == null ? void 0 : overrideProps.storefrontApiVersion) ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
-      }
-    };
-  }, [shopifyConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ShopifyContext.Provider, { value: finalConfig, children });
+/**
+* The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.
+* @publicDocs
+*/
+function ShopifyProvider({ children, ...shopifyConfig }) {
+	if (!shopifyConfig.countryIsoCode || !shopifyConfig.languageIsoCode || !shopifyConfig.storeDomain || !shopifyConfig.storefrontToken || !shopifyConfig.storefrontApiVersion) throw new Error(`Please provide the necessary props to '<ShopifyProvider/>'`);
+	if (shopifyConfig.storefrontApiVersion !== "2026-04") console.warn(`<ShopifyProvider/>: This version of Hydrogen React is built for Shopify's Storefront API version ${require_storefront_api_constants.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 React and the Storefront API.`);
+	const finalConfig = (0, react.useMemo)(() => {
+		const sameDomainForStorefrontApi = shopifyConfig.sameDomainForStorefrontApi ?? isSfapiProxyEnabled();
+		function getShopifyDomain(overrideProps) {
+			const domain = overrideProps?.storeDomain ?? shopifyConfig.storeDomain;
+			return domain.includes("://") ? domain : `https://${domain}`;
+		}
+		return {
+			...shopifyConfig,
+			sameDomainForStorefrontApi,
+			getPublicTokenHeaders(overrideProps) {
+				return require_storefront_client.getPublicTokenHeadersRaw(overrideProps.contentType, shopifyConfig.storefrontApiVersion, overrideProps.storefrontToken ?? shopifyConfig.storefrontToken);
+			},
+			getShopifyDomain,
+			getStorefrontApiUrl(overrideProps) {
+				const finalDomainUrl = sameDomainForStorefrontApi && typeof window !== "undefined" ? window.location.origin : getShopifyDomain({ storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain });
+				return `${finalDomainUrl}${finalDomainUrl.endsWith("/") ? "" : "/"}api/${overrideProps?.storefrontApiVersion ?? shopifyConfig.storefrontApiVersion}/graphql.json`;
+			}
+		};
+	}, [shopifyConfig]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShopifyContext.Provider, {
+		value: finalConfig,
+		children
+	});
 }
+/**
+* Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
+* @publicDocs
+*/
 function useShop() {
-  const shopContext = React.useContext(ShopifyContext);
-  if (!shopContext) {
-    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);
-  }
-  return shopContext;
+	const shopContext = (0, react.useContext)(ShopifyContext);
+	if (!shopContext) throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);
+	return shopContext;
 }
+//#endregion
 exports.ShopifyProvider = ShopifyProvider;
 exports.defaultShopifyContext = defaultShopifyContext;
 exports.useShop = useShop;
-//# sourceMappingURL=ShopifyProvider.js.map
+
+//# sourceMappingURL=ShopifyProvider.js.map