@shopify/hydrogen-react 0.0.0-next-a09da91 → 0.0.0-next-59d697b

package/dist/dev/CartCheckoutButton.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const CartProvider = require("./CartProvider.js");
+const jsxRuntime = require("react/jsx-runtime");
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = react.useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = CartProvider.useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  react.useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+exports.CartCheckoutButton = CartCheckoutButton;
+//# sourceMappingURL=CartCheckoutButton.js.map

package/dist/dev/CartCheckoutButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,eAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,aAA9B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,QAAAA,UAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;;"}

package/dist/dev/CartCheckoutButton.mjs

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { jsx } from "react/jsx-runtime";
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsx("button", {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+export {
+  CartCheckoutButton
+};
+//# sourceMappingURL=CartCheckoutButton.mjs.map

package/dist/dev/CartCheckoutButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.mjs","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,SAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,QAA9B;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,YAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;"}

package/dist/dev/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AddToCartButton = require("./AddToCartButton.js");
+const CartCheckoutButton = require("./CartCheckoutButton.js");
 const CartProvider = require("./CartProvider.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
@@ -18,6 +19,7 @@ const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
 const Video = require("./Video.js");
 exports.AddToCartButton = AddToCartButton.AddToCartButton;
+exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;

package/dist/dev/index.js.map

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

package/dist/dev/index.mjs

@@ -1,4 +1,5 @@
 import { AddToCartButton } from "./AddToCartButton.mjs";
+import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
@@ -17,6 +18,7 @@ import { useMoney } from "./useMoney.mjs";
 import { Video } from "./Video.mjs";
 export {
   AddToCartButton,
+  CartCheckoutButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/dev/index.mjs.map

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

package/dist/prod/CartCheckoutButton.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const react = require("react");
+const CartProvider = require("./CartProvider.js");
+const jsxRuntime = require("react/jsx-runtime");
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = react.useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = CartProvider.useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  react.useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+exports.CartCheckoutButton = CartCheckoutButton;
+//# sourceMappingURL=CartCheckoutButton.js.map

package/dist/prod/CartCheckoutButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,eAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,aAA9B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,QAAAA,UAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;;"}

package/dist/prod/CartCheckoutButton.mjs

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { jsx } from "react/jsx-runtime";
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsx("button", {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+export {
+  CartCheckoutButton
+};
+//# sourceMappingURL=CartCheckoutButton.mjs.map

package/dist/prod/CartCheckoutButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.mjs","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,SAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,QAA9B;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,YAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;"}

package/dist/prod/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AddToCartButton = require("./AddToCartButton.js");
+const CartCheckoutButton = require("./CartCheckoutButton.js");
 const CartProvider = require("./CartProvider.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
@@ -18,6 +19,7 @@ const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
 const Video = require("./Video.js");
 exports.AddToCartButton = AddToCartButton.AddToCartButton;
+exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;

package/dist/prod/index.js.map

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

package/dist/prod/index.mjs

@@ -1,4 +1,5 @@
 import { AddToCartButton } from "./AddToCartButton.mjs";
+import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
@@ -17,6 +18,7 @@ import { useMoney } from "./useMoney.mjs";
 import { Video } from "./Video.mjs";
 export {
   AddToCartButton,
+  CartCheckoutButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/prod/index.mjs.map

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

package/dist/types/CartCheckoutButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+declare type PropsWeControl = 'onClick';
+/**
+ * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
+export declare function CartCheckoutButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+}): JSX.Element;
+export {};

package/dist/types/index.d.cts

@@ -1,5 +1,6 @@
 export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
+export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
+export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';

package/dist/umd/hydrogen-react.dev.js

@@ -766,7 +766,7 @@ query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ)
 ${cartFragment}
 `;
   const SFAPI_VERSION = "2022-10";
-  var _jsxFileName$d = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
+  var _jsxFileName$e = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
   const ShopifyContext = React.createContext({
     storeDomain: "test.myshopify.com",
     storefrontToken: "abc123",
@@ -797,7 +797,7 @@ ${cartFragment}
       value: finalConfig,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$e,
         lineNumber: 49,
         columnNumber: 5
       }
@@ -1312,7 +1312,7 @@ ${cartFragment}
   function isCartFetchResultEvent(event) {
     return event.type === "RESOLVE" || event.type === "ERROR" || event.type === "CART_COMPLETED";
   }
-  var _jsxFileName$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
+  var _jsxFileName$d = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
   const CartContext = React.createContext(null);
   function useCart() {
     const context = React.useContext(CartContext);
@@ -1625,7 +1625,7 @@ ${cartFragment}
       value: cartContextValue,
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
+        fileName: _jsxFileName$d,
         lineNumber: 425,
         columnNumber: 5
       }
@@ -1791,7 +1791,7 @@ fragment ImageFragment on Image {
   height
 }
 `;
-  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductProvider.tsx";
+  var _jsxFileName$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductProvider.tsx";
   const ProductOptionsContext = React.createContext(null);
   function ProductProvider({
     children,
@@ -1877,7 +1877,7 @@ fragment ImageFragment on Image {
       value,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$c,
         lineNumber: 201,
         columnNumber: 5
       }
@@ -1950,7 +1950,7 @@ fragment ImageFragment on Image {
     }
     return true;
   }
-  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
+  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
   function BaseButton(props) {
     const {
       as,
@@ -1975,13 +1975,13 @@ fragment ImageFragment on Image {
       ...passthroughProps,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$b,
         lineNumber: 59,
         columnNumber: 5
       }
     }, children);
   }
-  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/AddToCartButton.tsx";
+  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/AddToCartButton.tsx";
   function AddToCartButton(props) {
     var _a;
     const [addingItem, setAddingItem] = React.useState(false);
@@ -2025,7 +2025,7 @@ fragment ImageFragment on Image {
       defaultOnClick: handleAddItem,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$a,
         lineNumber: 71,
         columnNumber: 7
       }
@@ -2045,12 +2045,40 @@ fragment ImageFragment on Image {
       "aria-live": "assertive",
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$a,
         lineNumber: 80,
         columnNumber: 9
       }
     }, addingItem ? accessibleAddingToCartLabel : null) : null);
   }
+  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartCheckoutButton.tsx";
+  function CartCheckoutButton(props) {
+    const [requestedCheckout, setRequestedCheckout] = React.useState(false);
+    const {
+      status,
+      checkoutUrl
+    } = useCart();
+    const {
+      children,
+      ...passthroughProps
+    } = props;
+    React.useEffect(() => {
+      if (requestedCheckout && checkoutUrl && status === "idle") {
+        window.location.href = checkoutUrl;
+      }
+    }, [requestedCheckout, status, checkoutUrl]);
+    return /* @__PURE__ */ React__default.default.createElement("button", {
+      ...passthroughProps,
+      disabled: requestedCheckout || passthroughProps.disabled,
+      onClick: () => setRequestedCheckout(true),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 27,
+        columnNumber: 5
+      }
+    }, children);
+  }
   var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
   function ExternalVideo(props) {
     var _a, _b;
@@ -3358,6 +3386,7 @@ fragment ImageFragment on Image {
     };
   }
   exports2.AddToCartButton = AddToCartButton;
+  exports2.CartCheckoutButton = CartCheckoutButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;