@asteby/storefront-react 0.2.0 → 0.3.0

package/README.md

@@ -196,6 +196,138 @@ const mine = useSelectedLocation({ initialId: urlSucursal }) // ?sucursal= + loc
   `OpenStatus` (calcula tras montar; `now` fija el instante), `DirectionsLink`,
   `PickupOption` (muestra lo que manda OPS: costo y días), `NearestLocationForm`.
 
+## Mockups de respaldo (`@asteby/storefront-react/mockups`)
+
+Cuando un producto de OPS no trae imagen, `ProductImage` dibuja una ilustración
+SVG según el tipo de producto en lugar de un hueco: **llanta** (medida en cifras,
+marca, modelo, índice de carga/velocidad, LT, run flat), **refacción** (ficha con
+número de parte, OEM, compatibilidad y posición), **suplemento** (bote, frasco o
+bolsa con nombre, sabor y presentación) y **genérico** (caja con monograma).
+SSR, sin JavaScript en el cliente, sin red, sin `id`s; ~1–2 KB gzip por mockup.
+
+```tsx
+import { ProductImage } from '@asteby/storefront-react/mockups'
+
+// Sustituye el `product.featured_image ? <Image …/> : null` de las tarjetas:
+<ProductImage
+  product={product}
+  variant={selectedVariant}            // opcional: su imagen gana; su sabor/presentación alimenta el mockup
+  widths={[240, 360, 480, 720]}
+  sizes="(min-width: 1024px) 25vw, 50vw"
+  priority={index < 4}                  // LCP (solo aplica a la imagen real)
+  className="h-full w-full object-cover"
+/>
+```
+
+- **Con imagen** renderiza `<Image>` (srcset, `width`/`height`, `priority`); el
+  `alt` es el de OPS, o el título del producto si viene vacío.
+- **Sin imagen** renderiza `<svg role="img" aria-label="Ilustración de referencia: …">`
+  con `<title>`: nunca se anuncia como foto. `alt=""` lo vuelve decorativo
+  (`aria-hidden`), útil cuando el nombre ya está junto a la imagen.
+- **Nunca inventa ni muestra precios**: solo pinta lo que trae el producto
+  (atributos, `vendor`, título, opciones, variante). Sin medida no hay medida;
+  el sabor solo aparece con variante elegida o si la opción tiene un único valor.
+  Todo texto se limpia (controles/bidi), se recorta con `…` y React lo escapa.
+- `image={null}` fuerza el mockup (p. ej. en una galería); `kind="tire"` fuerza el tipo.
+
+### Qué tipo se dibuja
+
+`kind` → `resolveKind` (prop o `MockupProvider`) → `resolveMockupKind(product)`:
+
+1. Atributo `mockup_kind` (o `mockup`) en OPS, si ese tipo está registrado: el
+   dueño puede elegirlo sin tocar código.
+2. Atributos: `size_key`, `section_width_mm`, `rim_diameter_in`, `speed_rating`… → `tire`;
+   `part_number`, `oem_number`, `mpn` → `part`.
+3. Palabras en `product_type`, categoría y etiquetas (no en el título): llanta,
+   neumático, refacción, autoparte, proteína, creatina, colágeno, suplemento…
+4. `generic`.
+
+Atributos que lee cada uno (los del pack del giro, más alias comunes):
+llanta `size_key|size`, `section_width_mm|width`, `aspect_ratio|aspect`,
+`rim_diameter_in|rim`, `load_index`/`load_service`, `speed_rating`, `model`,
+`light_truck`, `runflat`; refacción `part_number|mpn`, `oem_number`,
+`fitment|compatibility|compatibilidad`, `position`; suplemento opción
+`Sabor`/`Presentación` o atributos `flavor|sabor`, `presentation|net_content`,
+`servings` (número) y `form|envase` (`cápsulas` → frasco, `bolsa` → bolsa).
+
+### Personalizar sin tocar el SDK
+
+**Colores y tipografía** con variables CSS. Por defecto toman el tema de la tienda
+(`--color-muted`, `--color-foreground`, `--color-background`, `--color-primary`,
+`--color-primary-foreground`, `--font-heading`/`--font-sans`, los que emite
+`ThemeStyle`) y si no hay, grises neutros con `light-dark()` (modo oscuro cuando
+la página declara `color-scheme: dark` o `light dark`).
+
+```css
+/* app/app.css de la tienda */
+:root {
+  --mockup-bg: var(--color-muted);        /* fondo del cuadro */
+  --mockup-ink: var(--color-foreground);  /* texto sobre el fondo */
+  --mockup-muted: #6b7280;                /* texto secundario sobre el fondo */
+  --mockup-surface: #001963;              /* hule, envase, caja */
+  --mockup-surface-ink: #ffffff;          /* texto sobre el envase */
+  --mockup-label: #ffffff;                /* etiqueta / ficha */
+  --mockup-label-ink: #000c3c;            /* texto sobre la etiqueta */
+  --mockup-accent: #f66123;               /* acento: R16, banda de la ficha, tapa */
+  --mockup-accent-ink: #ffffff;
+  --mockup-font: "Archivo", sans-serif;
+  --mockup-font-mono: ui-monospace, monospace;  /* números de parte */
+  --mockup-text-transform: uppercase;     /* p. ej. nombres en MAYÚSCULAS */
+}
+.dark { --mockup-surface: #0b1440; }
+```
+
+**Tipo por tienda** (sin recompilar el SDK) y textos de la interfaz:
+
+```tsx
+// app/root.tsx
+import { MockupProvider } from '@asteby/storefront-react/mockups'
+
+<MockupProvider
+  resolveKind={(product, guess) => (product.category?.handle === 'shakers' ? 'generic' : guess)}
+  labels={{ illustration: 'Imagen ilustrativa', servings: 'servicios' }}
+>
+  <Outlet />
+</MockupProvider>
+```
+
+**Un mockup propio** (o reemplazar uno base). `MockupFrame` da el `<svg>`, el
+fondo, las variables y la accesibilidad; `MockupText`, `wrapMockupText` y
+`fitMockupFontSize` acomodan el texto sin medir el DOM.
+
+```tsx
+import {
+  BUILTIN_MOCKUPS, MockupFrame, MockupText, MockupProvider, createMockupRegistry,
+  cleanMockupText, tone, wrapMockupText, type MockupComponentProps,
+} from '@asteby/storefront-react/mockups'
+
+type Helmet = { title: string; shell: string | null }
+
+function HelmetMockup({ data, label, labels, ...svg }: MockupComponentProps<Helmet>) {
+  return (
+    <MockupFrame kind="helmet" label={label} {...svg}>
+      <path d="M90 230a110 110 0 0 1 220 0v40H90z" style={tone('surface')} />
+      <MockupText lines={wrapMockupText(data.title, 24, 2)} x={200} y={330} size={22} />
+      {data.shell ? <MockupText lines={[data.shell]} x={200} y={372} size={14} tone="muted" /> : null}
+    </MockupFrame>
+  )
+}
+
+const registry = createMockupRegistry(BUILTIN_MOCKUPS).register('helmet', {
+  component: HelmetMockup,
+  fromProduct: (p) => ({ title: cleanMockupText(p.title) ?? '', shell: cleanMockupText(p.attributes?.shell, 24) }),
+  // describe: (d, labels) => `${labels.illustration}: ${d.title}`  (opcional)
+})
+
+<MockupProvider registry={registry} resolveKind={(p, guess) => (p.product_type === 'Casco' ? 'helmet' : guess)}>…</MockupProvider>
+```
+
+`registerMockup(kind, renderer)` hace lo mismo sobre el registro por defecto
+(llámalo una vez a nivel de módulo). Si registras solo un componente para un
+tipo base (`registerMockup('tire', MiLlanta)`), recibe los datos del extractor
+base (`TireMockupData`). Para dibujar sin producto completo:
+`<ProductMockup kind="part" data={partMockupData(product)} />`.
+
 ## API
 
 | Export | |
@@ -209,3 +341,4 @@ const mine = useSelectedLocation({ initialId: urlSucursal }) // ?sucursal= + loc
 | `productJsonLd`, `organizationJsonLd`, `localBusinessJsonLd`, `breadcrumbJsonLd`, `faqJsonLd`, `collectionJsonLd`, `JsonLd`, `serializeJsonLd` | schema.org JSON-LD |
 | `defineSection`, `SectionRegistry`, `createSectionRegistry`, `Sections`, `resolveSectionProps`, `sectionJsonSchema` | Content sections |
 | `themeToCss`, `themeToCssVariables`, `ThemeStyle`, `themeFontsHref`, `tokenName` | SSR theme |
+| `ProductImage`, `ProductMockup`, `MockupProvider`, `createMockupRegistry`, `registerMockup`, `BUILTIN_MOCKUPS`, `MockupFrame`, `MockupText`, `TireMockup`, `PartMockup`, `SupplementMockup`, `GenericMockup` | Mockups de respaldo (subpath `/mockups`) |

package/dist/chunk-C6QZNKRE.js

@@ -0,0 +1,162 @@
+import { createContext, useMemo, useContext, createElement } from 'react';
+import { createStorefrontClient, formatMoney, parseMoney } from '@asteby/storefront';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/context.tsx
+var StorefrontContext = createContext(null);
+function StorefrontProvider({ client, config, shop = null, locale, currency, children }) {
+  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ""}|${config.customerToken ?? ""}` : "";
+  const resolvedClient = useMemo(
+    () => client ?? (config ? createStorefrontClient(config) : null),
+    [client, configKey]
+  );
+  const value = useMemo(
+    () => ({
+      client: resolvedClient,
+      shop,
+      locale: locale ?? config?.locale ?? shop?.locale ?? "es-MX",
+      currency: currency ?? shop?.currency_code ?? "MXN"
+    }),
+    [resolvedClient, shop, locale, currency, config?.locale]
+  );
+  return /* @__PURE__ */ jsx(StorefrontContext.Provider, { value, children });
+}
+function useStorefront() {
+  const ctx = useContext(StorefrontContext);
+  if (!ctx) throw new Error("useStorefront must be used inside <StorefrontProvider>");
+  return ctx;
+}
+function useOptionalStorefront() {
+  return useContext(StorefrontContext);
+}
+function useStorefrontClient() {
+  const { client } = useStorefront();
+  if (!client) throw new Error("<StorefrontProvider> needs a `client` or `config` for browser-side calls");
+  return client;
+}
+function Money({
+  data,
+  as,
+  locale,
+  withoutTrailingZeros,
+  withoutCurrency,
+  currencyDisplay,
+  ...rest
+}) {
+  const sf = useOptionalStorefront();
+  const text = formatMoney(data, locale ?? sf?.locale, {
+    ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {},
+    ...withoutCurrency !== void 0 ? { withoutCurrency } : {},
+    ...currencyDisplay !== void 0 ? { currencyDisplay } : {}
+  });
+  return createElement(as ?? "span", rest, text);
+}
+var DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600];
+var defaultImageLoader = (src, width, height) => {
+  try {
+    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src);
+    const url = new URL(src, "http://relative.invalid");
+    url.searchParams.set("width", String(width));
+    if (height) url.searchParams.set("height", String(height));
+    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash;
+  } catch {
+    return src;
+  }
+};
+function parseRatio(ratio) {
+  if (!ratio) return null;
+  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n));
+  return w && h ? w / h : null;
+}
+function Image({
+  data,
+  sizes = "100vw",
+  widths = DEFAULT_IMAGE_WIDTHS,
+  loader = defaultImageLoader,
+  priority = false,
+  aspectRatio,
+  alt,
+  loading,
+  decoding,
+  ...rest
+}) {
+  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null);
+  let candidates = [...widths].sort((a, b) => a - b);
+  if (data.width) {
+    const capped = candidates.filter((w) => w <= data.width);
+    candidates = capped.length ? capped : [data.width];
+  }
+  const srcSet = loader ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : void 0)} ${w}w`).join(", ") : void 0;
+  const width = data.width ?? candidates[candidates.length - 1];
+  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : void 0);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: data.url,
+      alt: alt ?? data.alt ?? "",
+      ...srcSet ? { srcSet, sizes } : {},
+      ...width ? { width } : {},
+      ...height ? { height } : {},
+      loading: loading ?? (priority ? "eager" : "lazy"),
+      decoding: decoding ?? (priority ? "auto" : "async"),
+      ...priority ? { fetchPriority: "high" } : {},
+      ...rest
+    }
+  );
+}
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function ProductPrice({
+  product,
+  variant,
+  fromLabel = "Desde",
+  compareAtLabel = "Precio anterior",
+  locale,
+  withoutTrailingZeros,
+  ...rest
+}) {
+  let price = null;
+  let compareAt = null;
+  let isRange = false;
+  if (variant) {
+    price = variant.price;
+    compareAt = variant.compare_at_price;
+  } else if (product) {
+    price = product.price_range.min;
+    compareAt = product.compare_at_price_range?.min ?? null;
+    isRange = product.price_range.min.amount !== product.price_range.max.amount;
+  }
+  if (!price) return null;
+  const onSale = compareAt !== null && parseMoney(compareAt) > parseMoney(price);
+  const opts = { ...locale ? { locale } : {}, ...withoutTrailingZeros !== void 0 ? { withoutTrailingZeros } : {} };
+  return /* @__PURE__ */ jsxs("div", { "data-on-sale": onSale || void 0, ...rest, children: [
+    isRange ? /* @__PURE__ */ jsxs("span", { "data-price-prefix": "", children: [
+      fromLabel,
+      " "
+    ] }) : null,
+    /* @__PURE__ */ jsx(Money, { data: price, "data-price": "", ...opts }),
+    onSale && compareAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs("s", { "data-compare-at-price": "", children: [
+        /* @__PURE__ */ jsxs("span", { style: VISUALLY_HIDDEN, children: [
+          compareAtLabel,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx(Money, { data: compareAt, ...opts })
+      ] })
+    ] }) : null
+  ] });
+}
+
+export { DEFAULT_IMAGE_WIDTHS, Image, Money, ProductPrice, StorefrontProvider, defaultImageLoader, useOptionalStorefront, useStorefront, useStorefrontClient };
+//# sourceMappingURL=chunk-C6QZNKRE.js.map
+//# sourceMappingURL=chunk-C6QZNKRE.js.map

package/dist/chunk-C6QZNKRE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context.tsx","../src/components.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-C6QZNKRE.js","sourcesContent":["import { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport { createStorefrontClient, type Shop, type StorefrontClient, type StorefrontClientOptions } from '@asteby/storefront'\n\nexport type StorefrontContextValue = {\n  /** Client for browser-side calls (use a public `pk_` token). */\n  client: StorefrontClient | null\n  shop: Shop | null\n  /** BCP 47 locale used for formatting (defaults to `shop.locale`, then `es-MX`). */\n  locale: string\n  /** ISO 4217 currency (defaults to `shop.currency_code`, then `MXN`). */\n  currency: string\n}\n\nconst StorefrontContext = createContext<StorefrontContextValue | null>(null)\n\nexport type StorefrontProviderProps = {\n  /** A ready client. Takes precedence over `config`. */\n  client?: StorefrontClient\n  /** Options to create the browser client (use a `pk_` token). */\n  config?: StorefrontClientOptions\n  /** Shop info loaded on the server (root loader). */\n  shop?: Shop | null\n  locale?: string\n  currency?: string\n  children?: ReactNode\n}\n\n/**\n * Makes the storefront client, shop, locale and currency available to the\n * tree. SSR-safe: creating the client does not touch `window`.\n */\nexport function StorefrontProvider({ client, config, shop = null, locale, currency, children }: StorefrontProviderProps) {\n  const configKey = config ? `${config.baseUrl}|${config.token}|${config.locale ?? ''}|${config.customerToken ?? ''}` : ''\n  const resolvedClient = useMemo(\n    () => client ?? (config ? createStorefrontClient(config) : null),\n    [client, configKey],\n  )\n  const value = useMemo<StorefrontContextValue>(\n    () => ({\n      client: resolvedClient,\n      shop,\n      locale: locale ?? config?.locale ?? shop?.locale ?? 'es-MX',\n      currency: currency ?? shop?.currency_code ?? 'MXN',\n    }),\n    [resolvedClient, shop, locale, currency, config?.locale],\n  )\n  return <StorefrontContext.Provider value={value}>{children}</StorefrontContext.Provider>\n}\n\n/** Storefront context. Throws outside `<StorefrontProvider>`. */\nexport function useStorefront(): StorefrontContextValue {\n  const ctx = useContext(StorefrontContext)\n  if (!ctx) throw new Error('useStorefront must be used inside <StorefrontProvider>')\n  return ctx\n}\n\n/** Storefront context or `null` outside a provider (for components that work standalone). */\nexport function useOptionalStorefront(): StorefrontContextValue | null {\n  return useContext(StorefrontContext)\n}\n\n/** The client from context; throws when the provider has none. */\nexport function useStorefrontClient(): StorefrontClient {\n  const { client } = useStorefront()\n  if (!client) throw new Error('<StorefrontProvider> needs a `client` or `config` for browser-side calls')\n  return client\n}\n","import { createElement, type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react'\nimport { formatMoney, parseMoney, type FormatMoneyOptions, type Image as ImageData, type Money as MoneyData, type Product, type ProductVariant } from '@asteby/storefront'\nimport { useOptionalStorefront } from './context.js'\n\n// ---------------------------------------------------------------------------\n// Money\n// ---------------------------------------------------------------------------\n\nexport type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {\n  data: MoneyData\n  /** Element to render (default `span`). */\n  as?: As\n  /** Overrides the provider locale. */\n  locale?: string\n} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>\n\n/** Formats `Money` with the provider locale (or `locale`). */\nexport function Money<As extends ElementType = 'span'>({\n  data,\n  as,\n  locale,\n  withoutTrailingZeros,\n  withoutCurrency,\n  currencyDisplay,\n  ...rest\n}: MoneyProps<As>) {\n  const sf = useOptionalStorefront()\n  const text = formatMoney(data, locale ?? sf?.locale, {\n    ...(withoutTrailingZeros !== undefined ? { withoutTrailingZeros } : {}),\n    ...(withoutCurrency !== undefined ? { withoutCurrency } : {}),\n    ...(currencyDisplay !== undefined ? { currencyDisplay } : {}),\n  })\n  return createElement(as ?? 'span', rest, text)\n}\n\n// ---------------------------------------------------------------------------\n// Image\n// ---------------------------------------------------------------------------\n\nexport const DEFAULT_IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600] as const\n\n/** Builds the URL for one srcset width. */\nexport type ImageLoader = (src: string, width: number, height?: number) => string\n\n/**\n * Default loader: adds `?width=<w>` (the convention of most image CDNs and of\n * the OPS image proxy). URLs that cannot be parsed are returned unchanged.\n */\nexport const defaultImageLoader: ImageLoader = (src, width, height) => {\n  try {\n    const isAbsolute = /^[a-z][a-z0-9+.-]*:/i.test(src)\n    const url = new URL(src, 'http://relative.invalid')\n    url.searchParams.set('width', String(width))\n    if (height) url.searchParams.set('height', String(height))\n    return isAbsolute ? url.toString() : url.pathname + url.search + url.hash\n  } catch {\n    return src\n  }\n}\n\nexport type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {\n  data: ImageData\n  /** `sizes` attribute (default `100vw`). */\n  sizes?: string\n  /** Candidate widths for `srcset` (capped at the intrinsic width when known). */\n  widths?: readonly number[]\n  /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */\n  loader?: ImageLoader | null\n  /** Above-the-fold image: eager loading and `fetchpriority=\"high\"`. */\n  priority?: boolean\n  /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */\n  aspectRatio?: string\n}\n\nfunction parseRatio(ratio: string | undefined): number | null {\n  if (!ratio) return null\n  const [w, h] = ratio.split(/[/:]/).map((n) => Number.parseFloat(n))\n  return w && h ? w / h : null\n}\n\n/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */\nexport function Image({\n  data,\n  sizes = '100vw',\n  widths = DEFAULT_IMAGE_WIDTHS,\n  loader = defaultImageLoader,\n  priority = false,\n  aspectRatio,\n  alt,\n  loading,\n  decoding,\n  ...rest\n}: ImageProps) {\n  const ratio = parseRatio(aspectRatio) ?? (data.width && data.height ? data.width / data.height : null)\n  let candidates = [...widths].sort((a, b) => a - b)\n  if (data.width) {\n    const capped = candidates.filter((w) => w <= data.width!)\n    candidates = capped.length ? capped : [data.width]\n  }\n  const srcSet = loader\n    ? candidates.map((w) => `${loader(data.url, w, ratio ? Math.round(w / ratio) : undefined)} ${w}w`).join(', ')\n    : undefined\n  const width = data.width ?? candidates[candidates.length - 1]\n  const height = data.height ?? (ratio && width ? Math.round(width / ratio) : undefined)\n  return (\n    <img\n      src={data.url}\n      alt={alt ?? data.alt ?? ''}\n      {...(srcSet ? { srcSet, sizes } : {})}\n      {...(width ? { width } : {})}\n      {...(height ? { height } : {})}\n      loading={loading ?? (priority ? 'eager' : 'lazy')}\n      decoding={decoding ?? (priority ? 'auto' : 'async')}\n      {...(priority ? { fetchPriority: 'high' as const } : {})}\n      {...rest}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// ProductPrice\n// ---------------------------------------------------------------------------\n\nconst VISUALLY_HIDDEN = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  padding: 0,\n  margin: -1,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n} as const\n\nexport type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n  product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null\n  variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null\n  /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */\n  fromLabel?: ReactNode\n  /** Accessible label for the compare-at price (default `Precio anterior`). */\n  compareAtLabel?: string\n  locale?: string\n  withoutTrailingZeros?: boolean\n}\n\n/**\n * Price with optional compare-at (strikethrough). With a `variant` it shows\n * that variant; otherwise the product's minimum price (prefixed with\n * `fromLabel` when prices vary).\n */\nexport function ProductPrice({\n  product,\n  variant,\n  fromLabel = 'Desde',\n  compareAtLabel = 'Precio anterior',\n  locale,\n  withoutTrailingZeros,\n  ...rest\n}: ProductPriceProps) {\n  let price: MoneyData | null = null\n  let compareAt: MoneyData | null = null\n  let isRange = false\n  if (variant) {\n    price = variant.price\n    compareAt = variant.compare_at_price\n  } else if (product) {\n    price = product.price_range.min\n    compareAt = product.compare_at_price_range?.min ?? null\n    isRange = product.price_range.min.amount !== product.price_range.max.amount\n  }\n  if (!price) return null\n  const onSale = compareAt !== null && parseMoney(compareAt) > parseMoney(price)\n  const opts = { ...(locale ? { locale } : {}), ...(withoutTrailingZeros !== undefined ? { withoutTrailingZeros } : {}) }\n  return (\n    <div data-on-sale={onSale || undefined} {...rest}>\n      {isRange ? <span data-price-prefix=\"\">{fromLabel} </span> : null}\n      <Money data={price} data-price=\"\" {...opts} />\n      {onSale && compareAt ? (\n        <>\n          {' '}\n          <s data-compare-at-price=\"\">\n            <span style={VISUALLY_HIDDEN}>{compareAtLabel}: </span>\n            <Money data={compareAt} {...opts} />\n          </s>\n        </>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/components-B5XhSH-m.d.cts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant } from '@asteby/storefront';
+
+type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
+    data: Money$1;
+    /** Element to render (default `span`). */
+    as?: As;
+    /** Overrides the provider locale. */
+    locale?: string;
+} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
+/** Formats `Money` with the provider locale (or `locale`). */
+declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
+/** Builds the URL for one srcset width. */
+type ImageLoader = (src: string, width: number, height?: number) => string;
+/**
+ * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
+ * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
+ */
+declare const defaultImageLoader: ImageLoader;
+type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
+    data: Image$1;
+    /** `sizes` attribute (default `100vw`). */
+    sizes?: string;
+    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
+    widths?: readonly number[];
+    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
+    loader?: ImageLoader | null;
+    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
+    priority?: boolean;
+    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
+    aspectRatio?: string;
+};
+/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
+declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
+type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
+    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
+    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
+    fromLabel?: ReactNode;
+    /** Accessible label for the compare-at price (default `Precio anterior`). */
+    compareAtLabel?: string;
+    locale?: string;
+    withoutTrailingZeros?: boolean;
+};
+/**
+ * Price with optional compare-at (strikethrough). With a `variant` it shows
+ * that variant; otherwise the product's minimum price (prefixed with
+ * `fromLabel` when prices vary).
+ */
+declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
+
+export { DEFAULT_IMAGE_WIDTHS as D, Image as I, Money as M, ProductPrice as P, type ImageLoader as a, type ImageProps as b, type MoneyProps as c, type ProductPriceProps as d, defaultImageLoader as e };

package/dist/components-B5XhSH-m.d.ts

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant } from '@asteby/storefront';
+
+type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
+    data: Money$1;
+    /** Element to render (default `span`). */
+    as?: As;
+    /** Overrides the provider locale. */
+    locale?: string;
+} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
+/** Formats `Money` with the provider locale (or `locale`). */
+declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
+/** Builds the URL for one srcset width. */
+type ImageLoader = (src: string, width: number, height?: number) => string;
+/**
+ * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
+ * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
+ */
+declare const defaultImageLoader: ImageLoader;
+type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
+    data: Image$1;
+    /** `sizes` attribute (default `100vw`). */
+    sizes?: string;
+    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
+    widths?: readonly number[];
+    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
+    loader?: ImageLoader | null;
+    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
+    priority?: boolean;
+    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
+    aspectRatio?: string;
+};
+/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
+declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
+type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
+    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
+    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
+    fromLabel?: ReactNode;
+    /** Accessible label for the compare-at price (default `Precio anterior`). */
+    compareAtLabel?: string;
+    locale?: string;
+    withoutTrailingZeros?: boolean;
+};
+/**
+ * Price with optional compare-at (strikethrough). With a `variant` it shows
+ * that variant; otherwise the product's minimum price (prefixed with
+ * `fromLabel` when prices vary).
+ */
+declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
+
+export { DEFAULT_IMAGE_WIDTHS as D, Image as I, Money as M, ProductPrice as P, type ImageLoader as a, type ImageProps as b, type MoneyProps as c, type ProductPriceProps as d, defaultImageLoader as e };

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, FormEvent } from 'react';
-import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant, Collection, Section, Theme, GeoPoint, ShopBranch } from '@asteby/storefront';
+import { ReactNode, ComponentPropsWithoutRef, ComponentType, FormEvent } from 'react';
+import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, ProductVariant, Product, Image, Collection, Section, Theme, GeoPoint, ShopBranch, Money } from '@asteby/storefront';
+export { D as DEFAULT_IMAGE_WIDTHS, I as Image, a as ImageLoader, b as ImageProps, M as Money, c as MoneyProps, P as ProductPrice, d as ProductPriceProps, e as defaultImageLoader } from './components-B5XhSH-m.cjs';
 import { OpeningHours, GeoPoint as GeoPoint$1, OpenStatus as OpenStatus$1 } from '@asteby/storefront/geo';
 
 type StorefrontContextValue = {
@@ -124,55 +125,6 @@ declare function useCart(): CartContextValue;
 /** Cart context or `null` outside a provider. */
 declare function useOptionalCart(): CartContextValue | null;
 
-type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
-    data: Money$1;
-    /** Element to render (default `span`). */
-    as?: As;
-    /** Overrides the provider locale. */
-    locale?: string;
-} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
-/** Formats `Money` with the provider locale (or `locale`). */
-declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
-declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
-/** Builds the URL for one srcset width. */
-type ImageLoader = (src: string, width: number, height?: number) => string;
-/**
- * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
- * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
- */
-declare const defaultImageLoader: ImageLoader;
-type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
-    data: Image$1;
-    /** `sizes` attribute (default `100vw`). */
-    sizes?: string;
-    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
-    widths?: readonly number[];
-    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
-    loader?: ImageLoader | null;
-    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
-    priority?: boolean;
-    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
-    aspectRatio?: string;
-};
-/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
-declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
-type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
-    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
-    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
-    fromLabel?: ReactNode;
-    /** Accessible label for the compare-at price (default `Precio anterior`). */
-    compareAtLabel?: string;
-    locale?: string;
-    withoutTrailingZeros?: boolean;
-};
-/**
- * Price with optional compare-at (strikethrough). With a `variant` it shows
- * that variant; otherwise the product's minimum price (prefixed with
- * `fromLabel` when prices vary).
- */
-declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
-
 type ProductOptionValueState = {
     value: string;
     /** Part of the current selection. */
@@ -285,7 +237,7 @@ type SeoMetaInput = {
     description?: string | null;
     /** Canonical absolute URL. */
     url?: string | null;
-    image?: Image$1 | string | null;
+    image?: Image | string | null;
     /** `og:type` (default `website`). */
     type?: string;
     siteName?: string | null;
@@ -665,7 +617,7 @@ declare function DirectionsLink({ location, provider, children, ...rest }: Direc
 type PickupInfo<L extends ShopBranch = ShopBranch> = {
     location: L;
     /** `null` = free. Amount as sent by OPS; nothing is calculated here. */
-    fee: Money$1 | null;
+    fee: Money | null;
     free: boolean;
     /** Formatted `fee` (`null` when free). */
     feeText: string | null;
@@ -703,4 +655,4 @@ type NearestLocationFormProps<L extends ShopBranch = ShopBranch> = {
  */
 declare function NearestLocationForm<L extends ShopBranch = ShopBranch>({ locations, action, name, defaultValue, onSubmitPostalCode, onLocate, labels, children, ...rest }: NearestLocationFormProps<L>): react.JSX.Element | null;
 
-export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DEFAULT_IMAGE_WIDTHS, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, Image, type ImageLoader, type ImageProps, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, Money, type MoneyProps, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, ProductPrice, type ProductPriceProps, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };
+export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, ElementType, ComponentType, FormEvent } from 'react';
-import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, Image as Image$1, FormatMoneyOptions, Money as Money$1, Product, ProductVariant, Collection, Section, Theme, GeoPoint, ShopBranch } from '@asteby/storefront';
+import { ReactNode, ComponentPropsWithoutRef, ComponentType, FormEvent } from 'react';
+import { StorefrontClient, Shop, StorefrontClientOptions, Cart, CartLineInput, CartLineMerchandise, CartLineUpdateInput, CartBuyerInput, AddressInput, DeliveryInput, DeliveryOptions, ProductVariant, Product, Image, Collection, Section, Theme, GeoPoint, ShopBranch, Money } from '@asteby/storefront';
+export { D as DEFAULT_IMAGE_WIDTHS, I as Image, a as ImageLoader, b as ImageProps, M as Money, c as MoneyProps, P as ProductPrice, d as ProductPriceProps, e as defaultImageLoader } from './components-B5XhSH-m.js';
 import { OpeningHours, GeoPoint as GeoPoint$1, OpenStatus as OpenStatus$1 } from '@asteby/storefront/geo';
 
 type StorefrontContextValue = {
@@ -124,55 +125,6 @@ declare function useCart(): CartContextValue;
 /** Cart context or `null` outside a provider. */
 declare function useOptionalCart(): CartContextValue | null;
 
-type MoneyProps<As extends ElementType = 'span'> = FormatMoneyOptions & {
-    data: Money$1;
-    /** Element to render (default `span`). */
-    as?: As;
-    /** Overrides the provider locale. */
-    locale?: string;
-} & Omit<ComponentPropsWithoutRef<As>, 'children' | 'as'>;
-/** Formats `Money` with the provider locale (or `locale`). */
-declare function Money<As extends ElementType = 'span'>({ data, as, locale, withoutTrailingZeros, withoutCurrency, currencyDisplay, ...rest }: MoneyProps<As>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
-declare const DEFAULT_IMAGE_WIDTHS: readonly [320, 480, 640, 768, 1024, 1280, 1600];
-/** Builds the URL for one srcset width. */
-type ImageLoader = (src: string, width: number, height?: number) => string;
-/**
- * Default loader: adds `?width=<w>` (the convention of most image CDNs and of
- * the OPS image proxy). URLs that cannot be parsed are returned unchanged.
- */
-declare const defaultImageLoader: ImageLoader;
-type ImageProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'width' | 'height'> & {
-    data: Image$1;
-    /** `sizes` attribute (default `100vw`). */
-    sizes?: string;
-    /** Candidate widths for `srcset` (capped at the intrinsic width when known). */
-    widths?: readonly number[];
-    /** URL builder per width (default adds `?width=`). Pass `null` to disable srcset. */
-    loader?: ImageLoader | null;
-    /** Above-the-fold image: eager loading and `fetchpriority="high"`. */
-    priority?: boolean;
-    /** Forces an aspect ratio, e.g. `1/1` or `4/3`, used for width/height and srcset heights. */
-    aspectRatio?: string;
-};
-/** Responsive `<img>` with `srcset`, lazy by default, intrinsic size to avoid layout shift. */
-declare function Image({ data, sizes, widths, loader, priority, aspectRatio, alt, loading, decoding, ...rest }: ImageProps): react.JSX.Element;
-type ProductPriceProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-    product?: Pick<Product, 'price_range' | 'compare_at_price_range'> | null;
-    variant?: Pick<ProductVariant, 'price' | 'compare_at_price'> | null;
-    /** Prefix shown when the product has a price range and no variant is selected (default `Desde`). */
-    fromLabel?: ReactNode;
-    /** Accessible label for the compare-at price (default `Precio anterior`). */
-    compareAtLabel?: string;
-    locale?: string;
-    withoutTrailingZeros?: boolean;
-};
-/**
- * Price with optional compare-at (strikethrough). With a `variant` it shows
- * that variant; otherwise the product's minimum price (prefixed with
- * `fromLabel` when prices vary).
- */
-declare function ProductPrice({ product, variant, fromLabel, compareAtLabel, locale, withoutTrailingZeros, ...rest }: ProductPriceProps): react.JSX.Element | null;
-
 type ProductOptionValueState = {
     value: string;
     /** Part of the current selection. */
@@ -285,7 +237,7 @@ type SeoMetaInput = {
     description?: string | null;
     /** Canonical absolute URL. */
     url?: string | null;
-    image?: Image$1 | string | null;
+    image?: Image | string | null;
     /** `og:type` (default `website`). */
     type?: string;
     siteName?: string | null;
@@ -665,7 +617,7 @@ declare function DirectionsLink({ location, provider, children, ...rest }: Direc
 type PickupInfo<L extends ShopBranch = ShopBranch> = {
     location: L;
     /** `null` = free. Amount as sent by OPS; nothing is calculated here. */
-    fee: Money$1 | null;
+    fee: Money | null;
     free: boolean;
     /** Formatted `fee` (`null` when free). */
     feeText: string | null;
@@ -703,4 +655,4 @@ type NearestLocationFormProps<L extends ShopBranch = ShopBranch> = {
  */
 declare function NearestLocationForm<L extends ShopBranch = ShopBranch>({ locations, action, name, defaultValue, onSubmitPostalCode, onLocate, labels, children, ...rest }: NearestLocationFormProps<L>): react.JSX.Element | null;
 
-export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DEFAULT_IMAGE_WIDTHS, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, Image, type ImageLoader, type ImageProps, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, Money, type MoneyProps, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, ProductPrice, type ProductPriceProps, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defaultImageLoader, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };
+export { AddToCartButton, type AddToCartButtonProps, type BreadcrumbItem, CART_COOKIE_NAME, type CartContextValue, type CartCookieOptions, type CartLineAddInput, CartProvider, type CartProviderProps, type CartStatus, DirectionsLink, type DirectionsLinkProps, type FaqItem, type GeolocationErrorCode, type GeolocationFailure, type GeolocationPermission, type InferSectionProps, JsonLd, type JsonLdObject, type JsonLdProps, type LocalBusinessOptions, type LocationItemState, LocationList, type LocationListProps, LocationPicker, type LocationPickerProps, type MetaDescriptor, type NearbyLocation, NearestLocationForm, type NearestLocationFormLabels, type NearestLocationFormProps, OpenStatus, type OpenStatusLabels, type OpenStatusProps, type PickupInfo, PickupOption, type PickupOptionProps, type ProductOptionState, type ProductOptionValueState, type ProductOptionsState, SELECTED_LOCATION_PARAM, SELECTED_LOCATION_STORAGE_KEY, type SectionComponentProps, type SectionDefinition, type SectionPropError, type SectionPropKind, type SectionPropSchema, SectionRegistry, type SectionSchema, Sections, type SectionsProps, type SeoMetaInput, type StorefrontContextValue, StorefrontProvider, type StorefrontProviderProps, type ThemeCssOptions, ThemeStyle, type ThemeStyleProps, type UseGeolocationOptions, type UseGeolocationResult, type UseNearestLocationsOptions, type UseNearestLocationsResult, type UseProductOptionsConfig, type UseSelectedLocationOptions, type UseSelectedLocationResult, VariantSelector, type VariantSelectorProps, type VariantSelectorRenderProps, breadcrumbJsonLd, collectionJsonLd, collectionMeta, createSectionRegistry, defineSection, faqJsonLd, getCartIdFromCookie, isSafeCssValue, localBusinessJsonLd, openingHoursJsonLd, optimisticCart, organizationJsonLd, productJsonLd, productMeta, readCartCookie, readSelectedLocationId, resolveSectionProps, sectionJsonSchema, seoMeta, serializeCartCookie, serializeJsonLd, themeFontsHref, themeToCss, themeToCssVariables, toMerchandise, tokenName, useCart, useGeolocation, useNearestLocations, useOptionalCart, useOptionalStorefront, useProductOptions, useSelectedLocation, useStorefront, useStorefrontClient, writeCartCookie };