@shopify/hydrogen 0.24.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,223 @@
 # Changelog
 
+## 0.26.0
+
+### Minor Changes
+
+- [#1615](https://github.com/Shopify/hydrogen/pull/1615) [`20bfc438`](https://github.com/Shopify/hydrogen/commit/20bfc4388ed400dc215a41cca44fe8cd4a11022a) Thanks [@frehner](https://github.com/frehner)! - `<CartEstimatedCost/>` has been renamed to `<CartCost/>` to match a recent update to the Storefront API, in which `cart.estimatedCost` is being deprecated in favor of `cart.cost`.
+
+  Additionally, `cart.cost.compareAtAmount` was renamed to `cart.cost.compareAtAmountPerQuantity`.
+
+* [#1619](https://github.com/Shopify/hydrogen/pull/1619) [`b0c13696`](https://github.com/Shopify/hydrogen/commit/b0c13696b6030ab8697147fdbe3ccdf2522a3913) Thanks [@blittle](https://github.com/blittle)! - We have reworked how localization works in Hydrogen. By default the `useLocalization()` hook returns the default locale defined within your [Hydrogen configuration file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config). The `<LocalizationProvider>` component now takes `countryCode` and `languageCode` as optional props. Any props given to `<LocalizationProvider>` will also be used by the `useLocalization` hook.
+
+  **Breaking Change**
+
+  The `useCountry` hook has been removed. Instead use the [`useLocalization` hook](https://shopify.dev/api/hydrogen/hooks/localization/uselocalization).
+
+  ```diff
+  - import {useCountry, gql} from '@shopify/hydrogen';
+  + import {useLocalization, gql} from '@shopify/hydrogen';
+
+  export function MyComponent() {
+
+  -  const [country] = useCountry();
+  +  const {country} = useLocalization();
+
+    return ( /* Your JSX */ );
+  }
+  ```
+
+  The `Link` component now respects the `basePath` property defined within it's parent `FileRoutes` component. For example, given `<FileRoutes basePath="/cn">`, a route within that renders `<Link to="/products">` will actually produce an anchor tag prefixed with `/cn`: `<a href="/cn/products">`. You can override the `basePath` with a `basePath` prop on the `Link` component.
+
+- [#1646](https://github.com/Shopify/hydrogen/pull/1646) [`1103fb57`](https://github.com/Shopify/hydrogen/commit/1103fb575e51d5948c6bd4885bcd911be1f8bf7e) Thanks [@benjaminsehl](https://github.com/benjaminsehl)! - Updates default SEO titleTemplate for the Homepage
+
+### Patch Changes
+
+- [#1569](https://github.com/Shopify/hydrogen/pull/1569) [`e5896a3e`](https://github.com/Shopify/hydrogen/commit/e5896a3e20b0bf2760b238e713a7bc04f7e95e2d) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Clean up full page cache work with `waitUntil`
+
+* [#1643](https://github.com/Shopify/hydrogen/pull/1643) [`3b849606`](https://github.com/Shopify/hydrogen/commit/3b849606c4999d19920330f86c535a6f892dcc65) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache client components in browser when using TypeScript.
+
+- [#1605](https://github.com/Shopify/hydrogen/pull/1605) [`2eb2c461`](https://github.com/Shopify/hydrogen/commit/2eb2c4615210cafadab8ed154909f3516c72db3e) Thanks [@frandiox](https://github.com/frandiox)! - Fix hydration issues with `useId`.
+
+* [#1613](https://github.com/Shopify/hydrogen/pull/1613) [`c45ebd3c`](https://github.com/Shopify/hydrogen/commit/c45ebd3cf468c9f596ef399712506bd766dea54d) Thanks [@frehner](https://github.com/frehner)! - The `<ShopPayButton/>` and `<CartShopPayButton/>` now take in a `width` prop to help customize how wide the `<shop-pay-button>` custom element is, by using the newly added CSS custom property (variable) `--shop-pay-button-width`.
+
+- [#1651](https://github.com/Shopify/hydrogen/pull/1651) [`a19be2b2`](https://github.com/Shopify/hydrogen/commit/a19be2b22cee63bf95ade3a4f5803c460651a473) Thanks [@blittle](https://github.com/blittle)! - Fixes to the cart:
+
+  1. Fix bug when providing a lower-case country code to the `LocalizationProvider`
+  2. Make sure that the Cart always logs API errors
+
+* [#1649](https://github.com/Shopify/hydrogen/pull/1649) [`df0e01ff`](https://github.com/Shopify/hydrogen/commit/df0e01fff6afae22a30be8c0bb750aed016326a4) Thanks [@blittle](https://github.com/blittle)! - Add a `x-powered-by: Shopify-Hydrogen` header which can be disabled with the Hydrogen config property: `poweredByHeader: false`
+
+- [#1566](https://github.com/Shopify/hydrogen/pull/1566) [`cfe7385e`](https://github.com/Shopify/hydrogen/commit/cfe7385e0c64c3dc465d1bcd34ad9c7040db9969) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Add storefont id to cart provider query
+
+* [#1551](https://github.com/Shopify/hydrogen/pull/1551) [`3d20e92d`](https://github.com/Shopify/hydrogen/commit/3d20e92db3402e356c16d0bc5fc4450f9d8c0df5) Thanks [@jplhomer](https://github.com/jplhomer)! - In-Memory caching is now enabled by default in production for Node.js runtimes.
+
+- [#1604](https://github.com/Shopify/hydrogen/pull/1604) [`f3827d31`](https://github.com/Shopify/hydrogen/commit/f3827d31263352689c5149a5509b51d1fdb572d4) Thanks [@cartogram](https://github.com/cartogram)! - Adds new `load-config` entry point that exposes a `loadConfig()` function that will return the configuration object and the path to the found configuration file for a given Hydrogen project root.
+
+  Example:
+
+  ```ts
+  import {loadConfig} from '@shopify/hydrogen/load-config';
+
+  const {configuration, configurationPath} = await loadConfig({
+    root: 'path/to/hydrogen-app',
+  });
+  ```
+
+* [#1626](https://github.com/Shopify/hydrogen/pull/1626) [`29218452`](https://github.com/Shopify/hydrogen/commit/29218452a1679be629616993d8cc23ad7077667b) Thanks [@frandiox](https://github.com/frandiox)! - Fix import aliases.
+
+- [#1622](https://github.com/Shopify/hydrogen/pull/1622) [`d339239d`](https://github.com/Shopify/hydrogen/commit/d339239d23b074cba3ee637166f8120512a6afee) Thanks [@frandiox](https://github.com/frandiox)! - Fix module resolution after HMR in some scenarios.
+
+* [#1608](https://github.com/Shopify/hydrogen/pull/1608) [`b834dfdc`](https://github.com/Shopify/hydrogen/commit/b834dfdcddc56c78bb6fbb7e0a681cc3c977b62d) Thanks [@jplhomer](https://github.com/jplhomer)! - Add type exports for `HydrogenRouteProps`, `HydrogenApiRoute`, and `HydrogenApiRouteOptions`.
+
+- [#1603](https://github.com/Shopify/hydrogen/pull/1603) [`e1bb5810`](https://github.com/Shopify/hydrogen/commit/e1bb5810f218acc5b7debb60bcdebc6c9594f86c) Thanks [@frandiox](https://github.com/frandiox)! - Do not trigger prefetch when `to` prop is missing in the `Link` component.
+
+## 0.25.1
+
+## 0.25.0
+
+### Minor Changes
+
+- [#1570](https://github.com/Shopify/hydrogen/pull/1570) [`36f26e54`](https://github.com/Shopify/hydrogen/commit/36f26e54a0b136fe4b21807756969e592934c9f2) Thanks [@frehner](https://github.com/frehner)! - `<Image/>` now takes into account a specific order for determining the width and height.
+
+  1. `loaderOptions`'s width/height
+  2. width/height bare props
+  3. `data`'s width/height
+
+  `getShopifyImageDimensions()` was also updated to handle this logic.
+
+* [#1506](https://github.com/Shopify/hydrogen/pull/1506) [`58d6ef55`](https://github.com/Shopify/hydrogen/commit/58d6ef55be2929c9a1680a6a372bb2e5fdfb7ee6) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Hydrogen now supports full-page caching out of the box. Previously, Hydrogen relied on the network edge to provide full-page caching for dynamic responses (HTML).
+
+- [#1346](https://github.com/Shopify/hydrogen/pull/1346) [`01814369`](https://github.com/Shopify/hydrogen/commit/018143693f96b7a200258665de570a9369ae8e65) Thanks [@lordofthecactus](https://github.com/lordofthecactus)! - Add `onClick` and `buttonRef` props to `AddToCartButton`, `BuyNowButton` and `CartLineQuantityAdjustButton`
+
+* [#1523](https://github.com/Shopify/hydrogen/pull/1523) [`4ef2e5b9`](https://github.com/Shopify/hydrogen/commit/4ef2e5b93cd537a213334211113c224194d9dd68) Thanks [@blittle](https://github.com/blittle)! - We've simplified the built-in Hydrogen caching strategies. Instead of `CacheSeconds`, `CacheMinutes`, `CacheHours`, `CacheDays`, `CacheMonths`, and `NoStore`, there is no simply `CacheLong`, `CacheShort`, and `CacheNone`. Please remember that you can [build your own caching strategies](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#build-your-own-caching-strategies).
+
+- [#1513](https://github.com/Shopify/hydrogen/pull/1513) [`8d67b559`](https://github.com/Shopify/hydrogen/commit/8d67b559e8d59d02ca353ec43fb5b2b3ff2f5961) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change:** We are starting to use [`exports` property in `package.json`](https://nodejs.org/api/packages.html#package-entry-points) to list all the entry points in this package.
+
+  This might incur breaking changes in some rare cases when importing private properties from Hydrogen `dist` files. Notice that we **discourage** doing so for anything that is not publicly documented but, if your app was relying on some private properties, then this might help:
+
+  ```diff
+  -import {xyz} from '@shopify/hydrogen/dist/esnext/<internal-path>';
+  +import {xyz} from '@shopify/hydrogen/<internal-path>';
+  ```
+
+  Aside from that, it is recommended that TypeScript projects update the `tsconfig.json` file to use `compilerOptions.moduleResolution: "node16"` to make sure Hydrogen types are loaded in your editor.
+  For JavaScript projects, create or edit `<root>/jsconfig.json` file with the following information to improve typings:
+
+  ```json
+  {
+    "compilerOptions": {
+      "target": "es2020",
+      "module": "esnext",
+      "moduleResolution": "node16",
+      "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
+      "jsx": "react",
+      "types": ["vite/client"]
+    },
+    "exclude": ["node_modules", "dist"],
+    "include": ["**/*.js", "**/*.jsx"]
+  }
+  ```
+
+* [#1528](https://github.com/Shopify/hydrogen/pull/1528) [`72d21b87`](https://github.com/Shopify/hydrogen/commit/72d21b87e48a682794889610741f03560bce0be7) Thanks [@frehner](https://github.com/frehner)! - Metafields have changed in Storefront API `2022-07`. We updated our code to work with that update, which means that the following changes will **only work if you're using `2022-07` or newer.**
+
+  ## Metafields changes
+
+  ### Storefront API `2022-07`
+
+  Metafields have changed how you access them in the Storefront API. See [the release notes](https://shopify.dev/api/release-notes/2022-07) for more details. In order to support the new way of querying metafields, Hydrogen has made the following updates:
+
+  ### `<Metafield/>`
+
+  Previously, the `<Metafield/>` component expected you to use `useParseMetafields()` before passing a metafield to it.
+
+  Now, `<Metafield/>` will use `parseMetafield()` itself so that you don't have to. However, this does mean that if you use `parseMetafield()` and then pass it to `<Metafield/>`, it will likely break because it will try to parse your metafield's value a second time.
+
+  ### `useParsedMetafields()` and `parseMetafield()`
+
+  Deprecated `useParsedMetafields()` in favor of `parseMetafield()`. `parseMetafield()` takes in a single metafield and returns a new object, and importantly it can be used on both the client _and_ the server.
+
+  If you need to memoize the value on the client, then you can do so using `React.memo`:
+
+  ```tsx
+  import {useMemo} from 'react';
+  import {parseMetafield} from '@shopify/hydrogen'x
+
+  function MyComponent() {
+    const parsedMetafield = useMemo(() => parseMetafield(metafield), [metafield]);
+  }
+  ```
+
+- [#1517](https://github.com/Shopify/hydrogen/pull/1517) [`68b8185e`](https://github.com/Shopify/hydrogen/commit/68b8185e74805a6453e246f01ce69a38988078ef) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change:** The utilities used in `hydrogen.config.js` file are now exported from `@shopiy/hydrogen/config` instead of `@shopify/hydrogen`:
+
+  ```diff
+  -import {defineConfig} from '@shopify/hydrogen/config';
+  import {
+  + defineConfig,
+    CookieSessionStorage,
+    PerformanceMetricsServerAnalyticsConnector,
+    ShopifyServerAnalyticsConnector,
+  -} from '@shopify/hydrogen';
+  +} from '@shopify/hydrogen/config'
+
+  export default defineConfig({
+    shopify: {/* ... */},
+    session: CookieSessionStorage('__session', {
+      path: '/',
+      /* ... */
+    }),
+    serverAnalyticsConnectors: [
+      PerformanceMetricsServerAnalyticsConnector,
+      ShopifyServerAnalyticsConnector,
+    ],
+  });
+  ```
+
+### Patch Changes
+
+- [#1494](https://github.com/Shopify/hydrogen/pull/1494) [`3b549439`](https://github.com/Shopify/hydrogen/commit/3b549439bae1ec43ae9171744c576c53d8e8f6f1) Thanks [@jplhomer](https://github.com/jplhomer)! - Update `flattenConnection` to accept `nodes` and `edges` payloads
+
+* [#1579](https://github.com/Shopify/hydrogen/pull/1579) [`2f75247c`](https://github.com/Shopify/hydrogen/commit/2f75247c071253ae27f6070a066897b5758a6a4f) Thanks [@frandiox](https://github.com/frandiox)! - Support renaming client component exports in intermediate/facade files.
+
+- [#1562](https://github.com/Shopify/hydrogen/pull/1562) [`d38f6413`](https://github.com/Shopify/hydrogen/commit/d38f6413361d1ecb49c52d8389547d2b064081f7) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Add storefront id to useShopQuery calls when available
+
+* [#1593](https://github.com/Shopify/hydrogen/pull/1593) [`ae35b70b`](https://github.com/Shopify/hydrogen/commit/ae35b70b0847e1a6270d1c63d2968a3578442e66) Thanks [@juanpprieto](https://github.com/juanpprieto)! - Ensure the effect that updates the `cart.buyerIdenity.countryCode` is run when `countyCode` prop changes
+
+- [#1504](https://github.com/Shopify/hydrogen/pull/1504) [`cc453242`](https://github.com/Shopify/hydrogen/commit/cc4532426509fd216f1bc036d5a095a18812b0cb) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix read-only request.status in worker environments.
+
+* [#1548](https://github.com/Shopify/hydrogen/pull/1548) [`923cb140`](https://github.com/Shopify/hydrogen/commit/923cb140b44fe989388f8754a8ca88bbfc68ab71) Thanks [@cartogram](https://github.com/cartogram)! - Add new devTools interface for performance, settings and graphQL tracking
+
+- [#1375](https://github.com/Shopify/hydrogen/pull/1375) [`217b5f23`](https://github.com/Shopify/hydrogen/commit/217b5f23613da794bb6879ab0c897b66ef6204cf) Thanks [@blittle](https://github.com/blittle)! - Add a built-in healthcheck route available at `/__health`. It responds with a 200 and no body. Also suppresses server logs for built-in routes like healthcheck and analytics.
+
+* [#1541](https://github.com/Shopify/hydrogen/pull/1541) [`4fde81f9`](https://github.com/Shopify/hydrogen/commit/4fde81f9d9ee739a6fbe5a8a903d3e6901144bf0) Thanks [@frandiox](https://github.com/frandiox)! - Fix support for latest React@experimental version.
+
+- [#1497](https://github.com/Shopify/hydrogen/pull/1497) [`3364225f`](https://github.com/Shopify/hydrogen/commit/3364225ff62d283893643ea28c0135ff22af1dff) Thanks [@blittle](https://github.com/blittle)! - Improve waterfall detection
+
+  1. Show a summary in dev mode with instructions on getting details
+  2. Only show the waterfall warning the second time the page is loaded
+  3. Don't show the waterfall warning on preloaded queries
+
+* [#1519](https://github.com/Shopify/hydrogen/pull/1519) [`d54b1072`](https://github.com/Shopify/hydrogen/commit/d54b10725b635f4531e94b9391cfd56f31a1d2e5) Thanks [@frandiox](https://github.com/frandiox)! - Improve CPU performance of the `useMoney` hook.
+
+- [#1518](https://github.com/Shopify/hydrogen/pull/1518) [`f0b69477`](https://github.com/Shopify/hydrogen/commit/f0b6947762acdfd617c9ccd34615a36a64ab36f2) Thanks [@frandiox](https://github.com/frandiox)! - Compile code to latest supported ES version in workers and Node.
+
+* [#1571](https://github.com/Shopify/hydrogen/pull/1571) [`accdc78a`](https://github.com/Shopify/hydrogen/commit/accdc78a13cc1557826509545a322bfa04e6e288) Thanks [@jplhomer](https://github.com/jplhomer)! - Upgrade Hydrogen to React v18.2. To update your app, run `yarn add @shopify/hydrogen@latest react@latest react-dom@latest`.
+
+- [#1578](https://github.com/Shopify/hydrogen/pull/1578) [`f5290393`](https://github.com/Shopify/hydrogen/commit/f5290393264c523045cab4082495e81ec72d576d) Thanks [@frandiox](https://github.com/frandiox)! - Fix an issue where newly imported client components were not found in the browser.
+
+* [#1556](https://github.com/Shopify/hydrogen/pull/1556) [`06f3d174`](https://github.com/Shopify/hydrogen/commit/06f3d174ff286ece0a7175ac7c2ae37e574f73b0) Thanks [@blittle](https://github.com/blittle)! - Add support for `Request.formData()` within API Routes for Node 16-17. Example:
+
+  ```ts
+  export async function api(request) {
+    const formData = await request.formData();
+
+    const username = formData.get('user');
+    const password = formData.get('pass');
+
+    ...
+  }
+  ```
+
 ## 0.24.0
 
 ### Minor Changes

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { BaseButtonProps } from '../BaseButton';
 interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
@@ -9,15 +9,12 @@ interface AddToCartButtonProps {
     variantId?: string | null;
     /** The item quantity. */
     quantity?: number;
-    /** Any ReactNode elements. */
-    children: ReactNode;
     /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */
     accessibleAddingToCartLabel?: string;
 }
-declare type PropsWeControl = 'onClick';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
-export declare function AddToCartButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & AddToCartButtonProps): JSX.Element;
+export declare function AddToCartButton(props: AddToCartButtonProps & BaseButtonProps): JSX.Element;
 export {};

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

@@ -1,17 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useCart } from '../CartProvider';
 import { useProductOptions } from '../ProductOptionsProvider';
+import { BaseButton } from '../BaseButton';
 /**
  * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
  * It must be a descendent of the `CartProvider` component.
  */
 export function AddToCartButton(props) {
-    var _a;
     const [addingItem, setAddingItem] = useState(false);
-    const { variantId: explicitVariantId, quantity = 1, attributes, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { variantId: explicitVariantId, quantity = 1, attributes, onClick, children, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, linesAdd } = useCart();
     const { selectedVariant } = useProductOptions();
-    const variantId = (_a = explicitVariantId !== null && explicitVariantId !== void 0 ? explicitVariantId : selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.id) !== null && _a !== void 0 ? _a : '';
+    const variantId = explicitVariantId ?? selectedVariant?.id ?? '';
     const disabled = explicitVariantId === null ||
         variantId === '' ||
         selectedVariant === null ||
@@ -22,17 +22,18 @@ export function AddToCartButton(props) {
             setAddingItem(false);
         }
     }, [status, addingItem]);
+    const handleAddItem = useCallback(() => {
+        setAddingItem(true);
+        linesAdd([
+            {
+                quantity,
+                merchandiseId: variantId,
+                attributes,
+            },
+        ]);
+    }, [linesAdd, quantity, variantId, attributes]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { ...passthroughProps, disabled: disabled, onClick: () => {
-                setAddingItem(true);
-                linesAdd([
-                    {
-                        quantity,
-                        merchandiseId: variantId,
-                        attributes,
-                    },
-                ]);
-            } }, children),
+        React.createElement(BaseButton, { ...passthroughProps, disabled: disabled, onClick: onClick, defaultOnClick: handleAddItem }, children),
         accessibleAddingToCartLabel ? (React.createElement("p", { style: {
                 position: 'absolute',
                 width: '1px',

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

@@ -0,0 +1,14 @@
+import React, { ReactNode, Ref } from 'react';
+interface Props {
+    /** Any ReactNode elements. */
+    children: ReactNode;
+    /** Click event handler. Default behaviour triggers unless prevented */
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A default onClick behaviour */
+    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A ref to the underlying button */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+export declare type BaseButtonProps = Omit<JSX.IntrinsicElements['button'], 'onClick' | 'children'> & Props;
+export declare function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }: BaseButtonProps): JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useCallback } from 'react';
+export function BaseButton({ onClick, defaultOnClick, children, buttonRef, ...passthroughProps }) {
+    const handleOnClick = useCallback((event) => {
+        if (onClick) {
+            const clickShouldContinue = onClick(event);
+            if ((typeof clickShouldContinue === 'boolean' &&
+                clickShouldContinue === false) ||
+                event?.defaultPrevented)
+                return;
+        }
+        defaultOnClick?.(event);
+    }, [defaultOnClick, onClick]);
+    return (React.createElement("button", { ...passthroughProps, ref: buttonRef, onClick: handleOnClick }, children));
+}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { BaseButtonProps } from '../BaseButton';
 interface BuyNowButtonProps {
     /** The item quantity. Defaults to 1. */
     quantity?: number;
@@ -9,10 +9,7 @@ interface BuyNowButtonProps {
         key: string;
         value: string;
     }[];
-    /** Any `ReactNode` elements. */
-    children: ReactNode;
 }
-declare type PropsWeControl = 'onClick';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
-export declare function BuyNowButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & BuyNowButtonProps): JSX.Element;
+export declare function BuyNowButton(props: BuyNowButtonProps & BaseButtonProps): JSX.Element;
 export {};

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useInstantCheckout } from '../CartProvider';
+import { BaseButton } from '../BaseButton';
 /** The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout. */
 export function BuyNowButton(props) {
     const { createInstantCheckout, checkoutUrl } = useInstantCheckout();
     const [loading, setLoading] = useState(false);
-    const { quantity, variantId, attributes, children, ...passthroughProps } = props;
+    const { quantity, variantId, onClick, attributes, children, ...passthroughProps } = props;
     useEffect(() => {
         if (checkoutUrl) {
             window.location.href = checkoutUrl;
@@ -15,12 +16,12 @@ export function BuyNowButton(props) {
         createInstantCheckout({
             lines: [
                 {
-                    quantity: quantity !== null && quantity !== void 0 ? quantity : 1,
+                    quantity: quantity ?? 1,
                     merchandiseId: variantId,
                     attributes,
                 },
             ],
         });
-    }, [setLoading, createInstantCheckout, quantity, variantId, attributes]);
-    return (React.createElement("button", { disabled: loading !== null && loading !== void 0 ? loading : passthroughProps.disabled, ...passthroughProps, onClick: handleBuyNow }, children));
+    }, [createInstantCheckout, quantity, variantId, attributes]);
+    return (React.createElement(BaseButton, { disabled: loading ?? passthroughProps.disabled, ...passthroughProps, onClick: onClick, defaultOnClick: handleBuyNow }, children));
 }

package/dist/esnext/components/{CartEstimatedCost/CartEstimatedCost.client.d.ts → CartCost/CartCost.client.d.ts}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Money } from '../Money';
-export interface CartEstimatedCostProps {
+export interface CartCostProps {
     /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */
     amountType?: 'total' | 'subtotal' | 'tax' | 'duty';
     /** A function that takes an object return by the `useMoney` hook and returns a `ReactNode`. */
     children?: React.ReactNode;
 }
 /**
- * The `CartEstimatedCost` component renders a `Money` component with the
+ * The `CartCost` component renders a `Money` component with the
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export declare function CartEstimatedCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;
+export declare function CartCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostProps): JSX.Element | null;

package/dist/esnext/components/{CartEstimatedCost/CartEstimatedCost.client.js → CartCost/CartCost.client.js}

@@ -2,25 +2,25 @@ import React from 'react';
 import { useCart } from '../CartProvider';
 import { Money } from '../Money';
 /**
- * The `CartEstimatedCost` component renders a `Money` component with the
+ * The `CartCost` component renders a `Money` component with the
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export function CartEstimatedCost(props) {
-    const { estimatedCost } = useCart();
+export function CartCost(props) {
+    const { cost } = useCart();
     const { amountType = 'total', children, ...passthroughProps } = props;
     let amount;
     if (amountType == 'total') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalAmount;
+        amount = cost?.totalAmount;
     }
     else if (amountType == 'subtotal') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.subtotalAmount;
+        amount = cost?.subtotalAmount;
     }
     else if (amountType == 'tax') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalTaxAmount;
+        amount = cost?.totalTaxAmount;
     }
     else if (amountType == 'duty') {
-        amount = estimatedCost === null || estimatedCost === void 0 ? void 0 : estimatedCost.totalDutyAmount;
+        amount = cost?.totalDutyAmount;
     }
     if (amount == null) {
         return null;

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

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

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

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

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

@@ -9,8 +9,8 @@ export function CartLinePrice(props) {
     const cartLine = useCartLine();
     const { priceType = 'regular', ...passthroughProps } = props;
     const moneyV2 = priceType === 'regular'
-        ? cartLine.estimatedCost.totalAmount
-        : cartLine.estimatedCost.compareAtAmount;
+        ? cartLine.cost.totalAmount
+        : cartLine.cost.compareAtAmountPerQuantity;
     if (moneyV2 == null) {
         return null;
     }

package/dist/esnext/components/CartLineProvider/context.d.ts

@@ -4,25 +4,25 @@ export declare const CartLineContext: import("react").Context<({
     attributes: ({
         __typename?: "Attribute" | undefined;
     } & Pick<import("../../storefront-api-types").Attribute, "key" | "value">)[];
-    estimatedCost: {
-        __typename?: "CartLineEstimatedCost" | undefined;
+    cost: {
+        __typename?: "CartLineCost" | undefined;
     } & {
         totalAmount: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">;
-        compareAtAmount?: import("../../storefront-api-types").Maybe<{
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
+        compareAtAmountPerQuantity?: import("../../storefront-api-types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
     };
     merchandise: {
         __typename?: "ProductVariant" | undefined;
     } & Pick<import("../../storefront-api-types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
         compareAtPriceV2?: import("../../storefront-api-types").Maybe<{
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">> | undefined;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">> | undefined;
         priceV2: {
             __typename?: "MoneyV2" | undefined;
-        } & Pick<import("../../storefront-api-types").MoneyV2, "amount" | "currencyCode">;
+        } & Pick<import("../../storefront-api-types").MoneyV2, "currencyCode" | "amount">;
         image?: import("../../storefront-api-types").Maybe<{
             __typename?: "Image" | undefined;
         } & Pick<import("../../storefront-api-types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;

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

@@ -1,14 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType } from 'react';
 import { Props } from '../types';
-declare type PropsWeControl = 'onClick' | 'adjust';
+import { BaseButtonProps } from '../BaseButton';
+declare type PropsWeControl = 'adjust';
 /**
  * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
  * It must be a descendent of a `CartLineProvider` component.
  */
 export declare function CartLineQuantityAdjustButton<TTag extends ElementType = 'button'>(props: Props<TTag, PropsWeControl> & {
-    /** Any `ReactNode` elements. */
-    children: ReactNode;
     /** The adjustment for a cart line's quantity. Valid values: `increase` (default), `decrease`, or `remove`. */
     adjust?: 'increase' | 'decrease' | 'remove';
-}): JSX.Element;
+} & BaseButtonProps): JSX.Element;
 export {};

package/dist/esnext/components/CartLineQuantityAdjustButton/CartLineQuantityAdjustButton.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useCart } from '../CartProvider';
 import { useCartLine } from '../CartLineProvider';
+import { BaseButton } from '../BaseButton';
 /**
  * The `CartLineQuantityAdjustButton` component renders a button that adjusts the cart line's quantity when pressed.
  * It must be a descendent of a `CartLineProvider` component.
@@ -8,17 +9,18 @@ import { useCartLine } from '../CartLineProvider';
 export function CartLineQuantityAdjustButton(props) {
     const { status, linesRemove, linesUpdate } = useCart();
     const cartLine = useCartLine();
-    const { children, adjust, ...passthroughProps } = props;
-    return (React.createElement("button", { disabled: status !== 'idle', onClick: () => {
-            if (adjust === 'remove') {
-                linesRemove([cartLine.id]);
-                return;
-            }
-            const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
-            if (quantity <= 0) {
-                linesRemove([cartLine.id]);
-                return;
-            }
-            linesUpdate([{ id: cartLine.id, quantity }]);
-        }, ...passthroughProps }, children));
+    const { children, adjust, onClick, ...passthroughProps } = props;
+    const handleAdjust = useCallback(() => {
+        if (adjust === 'remove') {
+            linesRemove([cartLine.id]);
+            return;
+        }
+        const quantity = adjust === 'decrease' ? cartLine.quantity - 1 : cartLine.quantity + 1;
+        if (quantity <= 0) {
+            linesRemove([cartLine.id]);
+            return;
+        }
+        linesUpdate([{ id: cartLine.id, quantity }]);
+    }, [adjust, cartLine.id, cartLine.quantity, linesRemove, linesUpdate]);
+    return (React.createElement(BaseButton, { disabled: status !== 'idle', onClick: onClick, defaultOnClick: handleAdjust, ...passthroughProps }, children));
 }

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

@@ -8,7 +8,7 @@ import { CartLineProvider } from '../CartLineProvider';
 export function CartLines(props) {
     const { lines } = useCart();
     const { as, children, ...passthroughProps } = props;
-    const Wrapper = as !== null && as !== void 0 ? as : Fragment;
+    const Wrapper = as ?? Fragment;
     const ChildWrapper = Wrapper === 'ul' ? 'li' : Fragment;
     return (React.createElement(Wrapper, { ...passthroughProps }, lines.map((line) => {
         return (React.createElement(ChildWrapper, { key: line.id },