@asteby/storefront-react 0.12.0 → 0.13.1

package/dist/checkout.d.cts

@@ -1,103 +1,8 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, SelectHTMLAttributes, RefObject } from 'react';
+import { ReactNode } from 'react';
 import { Address, CartLine, CartCost, Money, ShippingRate, PickupOption } from '@asteby/storefront';
-
-type FieldMessages = {
-    valueMissing: string;
-    /** Required radio group (delivery, payment). */
-    choiceMissing: string;
-    email: string;
-    tel: string;
-    pattern: string;
-    /** `{n}` = minimum length. */
-    tooShort: string;
-    /** A field the server rejected. */
-    server: string;
-    /** Error summary title, `{n}` = number of fields. */
-    summaryOne: string;
-    summaryMany: string;
-    optional: string;
-};
-/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
-declare function fieldMessages(locale?: string | null, overrides?: Partial<FieldMessages> | null): FieldMessages;
-/** Field name -> error text. */
-type FieldErrors = Record<string, string>;
-type ErrorSummaryItem = {
-    name: string;
-    id: string;
-    label: string;
-    message: string;
-};
-type Control = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/**
- * The error text for a control, from its validity. A control can bring its own text with `data-sf-error` (any
- * failure) or `title` (pattern mismatch, the HTML convention).
- */
-declare function validationMessage(el: Control, m?: FieldMessages): string | null;
-type UseFieldErrorsOptions = {
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-    /** Fields the server rejected (e.g. from the action), shown with `serverMessages[name]` or the generic text. */
-    serverFields?: Iterable<string> | null;
-    serverMessages?: Record<string, string> | null;
-};
-type FieldErrorsState = {
-    errors: FieldErrors;
-    /** Non-null after a submit with problems (or with server errors): render it in `<ErrorSummary>`. */
-    summary: ErrorSummaryItem[] | null;
-    /** Changes every time a new summary appears, so `<ErrorSummary>` focuses it again. */
-    summaryKey: number;
-    clear: () => void;
-};
-/**
- * Inline validation for the page `<form>`. Listens to the form (no wrapping component): leaving a field with a value
- * checks it; typing in a field with an error clears it when fixed; a submit or `reportValidity()` with problems
- * collects them (the browser's bubbles are replaced by the inline texts) for the summary.
- */
-declare function useFieldErrors(formRef: RefObject<HTMLFormElement | null>, options?: UseFieldErrorsOptions): FieldErrorsState;
-type ErrorSummaryProps = {
-    items: readonly ErrorSummaryItem[] | null;
-    /** Changes when a new summary must take focus (`useFieldErrors().summaryKey`). */
-    focusKey?: number;
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-    title?: ReactNode;
-    className?: string;
-    classNames?: Partial<Record<'title' | 'list' | 'link', string>>;
-};
-/**
- * The list of problems after a submit, above the form: `role="alert"`, takes focus, one link per field (moves the
- * focus to it). Renders nothing without items.
- */
-declare function ErrorSummary({ items, focusKey, locale, messages, title, className, classNames: cx }: ErrorSummaryProps): react.JSX.Element | null;
-type CheckoutFieldClassNames = Partial<Record<'root' | 'label' | 'optional' | 'input' | 'hint' | 'error', string>>;
-type BaseFieldProps = {
-    name: string;
-    label: string;
-    /** Field id. Default: the name. */
-    id?: string;
-    /** Error text (from `useFieldErrors().errors[name]` or the server). */
-    error?: string | null;
-    /** Help under the label ("we only use it for the delivery"). */
-    hint?: ReactNode;
-    /** Marks the label "(optional)" and drops `required`. */
-    optional?: boolean;
-    classNames?: CheckoutFieldClassNames;
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-};
-type CheckoutFieldProps = BaseFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id'> & {
-    as?: 'input';
-};
-type CheckoutSelectProps = BaseFieldProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'id'> & {
-    as: 'select';
-    children: ReactNode;
-};
-/**
- * One labelled field: label (with "(optional)"), hint, the control and its error text, wired with `aria-describedby`
- * and `aria-invalid`. Required unless `optional`. `as="select"` renders a `<select>` with the given options.
- */
-declare function CheckoutField(props: CheckoutFieldProps | CheckoutSelectProps): react.JSX.Element;
+import { F as FieldErrors, g as FieldMessages, a as CheckoutFieldClassNames } from './fields-vnMUi2HB.cjs';
+export { C as CheckoutField, b as CheckoutFieldProps, c as CheckoutSelectProps, E as ErrorSummary, d as ErrorSummaryItem, e as ErrorSummaryProps, f as FieldErrorsState, U as UseFieldErrorsOptions, h as fieldMessages, u as useFieldErrors, v as validationMessage } from './fields-vnMUi2HB.cjs';
 
 type AddressFieldKey = 'zip' | 'province' | 'city' | 'neighborhood' | 'address1' | 'address2' | 'reference';
 type ContactFieldKey = 'email' | 'phone' | 'first_name' | 'last_name';
@@ -305,7 +210,7 @@ type Brand = {
     /** Short wordmark drawn in the badge (`\n` = two lines). Default: `name`. */
     mark?: string;
     /** Special drawings instead of a wordmark. */
-    shape?: 'mastercard';
+    shape?: 'mastercard' | 'transfer';
 };
 /** `"FedEx México"`, `"fedex_mx"` and `"FEDEX"` all become `fedex`. Lowercase ASCII letters and digits only. */
 declare function brandKey(raw: string | null | undefined): string;
@@ -528,4 +433,4 @@ declare function dedupeRates<R extends ShippingRate>(rates: readonly R[]): R[];
  */
 declare function recommendRates<R extends ShippingRate>(input: readonly R[], options?: RecommendRatesOptions): RecommendedRates<R>;
 
-export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutField, type CheckoutFieldClassNames, type CheckoutFieldProps, type CheckoutSelectProps, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, ErrorSummary, type ErrorSummaryItem, type ErrorSummaryProps, type FieldErrors, type FieldErrorsState, type FieldLayoutClassNames, type FieldMessages, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, type UseFieldErrorsOptions, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, fieldMessages, findBrand, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates, useFieldErrors, validationMessage };
+export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };

package/dist/checkout.d.ts

@@ -1,103 +1,8 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, SelectHTMLAttributes, RefObject } from 'react';
+import { ReactNode } from 'react';
 import { Address, CartLine, CartCost, Money, ShippingRate, PickupOption } from '@asteby/storefront';
-
-type FieldMessages = {
-    valueMissing: string;
-    /** Required radio group (delivery, payment). */
-    choiceMissing: string;
-    email: string;
-    tel: string;
-    pattern: string;
-    /** `{n}` = minimum length. */
-    tooShort: string;
-    /** A field the server rejected. */
-    server: string;
-    /** Error summary title, `{n}` = number of fields. */
-    summaryOne: string;
-    summaryMany: string;
-    optional: string;
-};
-/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
-declare function fieldMessages(locale?: string | null, overrides?: Partial<FieldMessages> | null): FieldMessages;
-/** Field name -> error text. */
-type FieldErrors = Record<string, string>;
-type ErrorSummaryItem = {
-    name: string;
-    id: string;
-    label: string;
-    message: string;
-};
-type Control = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/**
- * The error text for a control, from its validity. A control can bring its own text with `data-sf-error` (any
- * failure) or `title` (pattern mismatch, the HTML convention).
- */
-declare function validationMessage(el: Control, m?: FieldMessages): string | null;
-type UseFieldErrorsOptions = {
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-    /** Fields the server rejected (e.g. from the action), shown with `serverMessages[name]` or the generic text. */
-    serverFields?: Iterable<string> | null;
-    serverMessages?: Record<string, string> | null;
-};
-type FieldErrorsState = {
-    errors: FieldErrors;
-    /** Non-null after a submit with problems (or with server errors): render it in `<ErrorSummary>`. */
-    summary: ErrorSummaryItem[] | null;
-    /** Changes every time a new summary appears, so `<ErrorSummary>` focuses it again. */
-    summaryKey: number;
-    clear: () => void;
-};
-/**
- * Inline validation for the page `<form>`. Listens to the form (no wrapping component): leaving a field with a value
- * checks it; typing in a field with an error clears it when fixed; a submit or `reportValidity()` with problems
- * collects them (the browser's bubbles are replaced by the inline texts) for the summary.
- */
-declare function useFieldErrors(formRef: RefObject<HTMLFormElement | null>, options?: UseFieldErrorsOptions): FieldErrorsState;
-type ErrorSummaryProps = {
-    items: readonly ErrorSummaryItem[] | null;
-    /** Changes when a new summary must take focus (`useFieldErrors().summaryKey`). */
-    focusKey?: number;
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-    title?: ReactNode;
-    className?: string;
-    classNames?: Partial<Record<'title' | 'list' | 'link', string>>;
-};
-/**
- * The list of problems after a submit, above the form: `role="alert"`, takes focus, one link per field (moves the
- * focus to it). Renders nothing without items.
- */
-declare function ErrorSummary({ items, focusKey, locale, messages, title, className, classNames: cx }: ErrorSummaryProps): react.JSX.Element | null;
-type CheckoutFieldClassNames = Partial<Record<'root' | 'label' | 'optional' | 'input' | 'hint' | 'error', string>>;
-type BaseFieldProps = {
-    name: string;
-    label: string;
-    /** Field id. Default: the name. */
-    id?: string;
-    /** Error text (from `useFieldErrors().errors[name]` or the server). */
-    error?: string | null;
-    /** Help under the label ("we only use it for the delivery"). */
-    hint?: ReactNode;
-    /** Marks the label "(optional)" and drops `required`. */
-    optional?: boolean;
-    classNames?: CheckoutFieldClassNames;
-    locale?: string;
-    messages?: Partial<FieldMessages>;
-};
-type CheckoutFieldProps = BaseFieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id'> & {
-    as?: 'input';
-};
-type CheckoutSelectProps = BaseFieldProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'id'> & {
-    as: 'select';
-    children: ReactNode;
-};
-/**
- * One labelled field: label (with "(optional)"), hint, the control and its error text, wired with `aria-describedby`
- * and `aria-invalid`. Required unless `optional`. `as="select"` renders a `<select>` with the given options.
- */
-declare function CheckoutField(props: CheckoutFieldProps | CheckoutSelectProps): react.JSX.Element;
+import { F as FieldErrors, g as FieldMessages, a as CheckoutFieldClassNames } from './fields-vnMUi2HB.js';
+export { C as CheckoutField, b as CheckoutFieldProps, c as CheckoutSelectProps, E as ErrorSummary, d as ErrorSummaryItem, e as ErrorSummaryProps, f as FieldErrorsState, U as UseFieldErrorsOptions, h as fieldMessages, u as useFieldErrors, v as validationMessage } from './fields-vnMUi2HB.js';
 
 type AddressFieldKey = 'zip' | 'province' | 'city' | 'neighborhood' | 'address1' | 'address2' | 'reference';
 type ContactFieldKey = 'email' | 'phone' | 'first_name' | 'last_name';
@@ -305,7 +210,7 @@ type Brand = {
     /** Short wordmark drawn in the badge (`\n` = two lines). Default: `name`. */
     mark?: string;
     /** Special drawings instead of a wordmark. */
-    shape?: 'mastercard';
+    shape?: 'mastercard' | 'transfer';
 };
 /** `"FedEx México"`, `"fedex_mx"` and `"FEDEX"` all become `fedex`. Lowercase ASCII letters and digits only. */
 declare function brandKey(raw: string | null | undefined): string;
@@ -528,4 +433,4 @@ declare function dedupeRates<R extends ShippingRate>(rates: readonly R[]): R[];
  */
 declare function recommendRates<R extends ShippingRate>(input: readonly R[], options?: RecommendRatesOptions): RecommendedRates<R>;
 
-export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutField, type CheckoutFieldClassNames, type CheckoutFieldProps, type CheckoutSelectProps, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, ErrorSummary, type ErrorSummaryItem, type ErrorSummaryProps, type FieldErrors, type FieldErrorsState, type FieldLayoutClassNames, type FieldMessages, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, type UseFieldErrorsOptions, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, fieldMessages, findBrand, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates, useFieldErrors, validationMessage };
+export { type AddressFieldKey, AddressFields, type AddressFieldsMessages, type AddressFieldsProps, type Brand, type BrandKind, BrandMark, type BrandMarkProps, type BrandMarkSource, CheckoutFieldClassNames, type ContactFieldKey, ContactFields, type ContactFieldsProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, FieldErrors, type FieldLayoutClassNames, FieldMessages, OrderSummary, type OrderSummaryClassNames, OrderSummaryDisclosure, type OrderSummaryDisclosureProps, type OrderSummaryMessages, type OrderSummaryProps, type PostalCodeInfo, type QuoteNote, type RateBadge, type RateGroup, type RateTag, type RecommendRatesOptions, type RecommendedRate, type RecommendedRates, addressFieldsMessages, brandKey, brandLogo, brandName, dedupeRates, deliveryMessages, findBrand, isQuoteChange, listBrands, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };

package/dist/checkout.js

@@ -1,230 +1,14 @@
-import { brandName, BrandMark, brandKey } from './chunk-ODIQR6TG.js';
-export { BrandMark, brandKey, brandLogo, brandName, findBrand, listBrands } from './chunk-ODIQR6TG.js';
+import { brandName, BrandMark, brandKey } from './chunk-JNUJGPJC.js';
+export { BrandMark, brandKey, brandLogo, brandName, findBrand, listBrands } from './chunk-JNUJGPJC.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
-import { useRef, useState, useEffect, useId, useMemo, useSyncExternalStore } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CheckoutField } from './chunk-DFGLCIEG.js';
+export { CheckoutField, ErrorSummary, fieldMessages, useFieldErrors, validationMessage } from './chunk-DFGLCIEG.js';
+import { useId, useState, useRef, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { formatMoney } from '@asteby/storefront';
 
 var ES = {
-  valueMissing: "Completa este campo.",
-  choiceMissing: "Elige una opci\xF3n.",
-  email: "Escribe un correo v\xE1lido, por ejemplo nombre@correo.com.",
-  tel: "Escribe un tel\xE9fono v\xE1lido.",
-  pattern: "Revisa el formato.",
-  tooShort: "Escribe al menos {n} caracteres.",
-  server: "Revisa este campo.",
-  summaryOne: "Revisa 1 campo para continuar",
-  summaryMany: "Revisa {n} campos para continuar",
-  optional: "(opcional)"
-};
-var EN = {
-  valueMissing: "Fill in this field.",
-  choiceMissing: "Choose an option.",
-  email: "Enter a valid email, like name@example.com.",
-  tel: "Enter a valid phone number.",
-  pattern: "Check the format.",
-  tooShort: "Enter at least {n} characters.",
-  server: "Check this field.",
-  summaryOne: "Check 1 field to continue",
-  summaryMany: "Check {n} fields to continue",
-  optional: "(optional)"
-};
-function fieldMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
-  return overrides ? { ...base, ...overrides } : base;
-}
-var isControl = (el) => !!el && typeof el.tagName === "string" && ["INPUT", "SELECT", "TEXTAREA"].includes(el.tagName) && !!el.name;
-function validationMessage(el, m = ES) {
-  const v = el.validity;
-  if (!v || v.valid) return null;
-  const own = el.getAttribute("data-sf-error");
-  if (own) return own;
-  if (v.valueMissing) return el instanceof HTMLInputElement && (el.type === "radio" || el.type === "checkbox") ? m.choiceMissing : m.valueMissing;
-  if (v.typeMismatch && el instanceof HTMLInputElement) return el.type === "email" ? m.email : el.type === "tel" ? m.tel : m.pattern;
-  if (v.patternMismatch) return el.getAttribute("title") || (el instanceof HTMLInputElement && el.type === "tel" ? m.tel : m.pattern);
-  if (v.tooShort && el instanceof HTMLInputElement) return m.tooShort.replace("{n}", String(el.minLength));
-  return el.validationMessage || m.pattern;
-}
-function labelOf(el) {
-  if (el instanceof HTMLInputElement && el.type === "radio") {
-    const legend = el.closest("fieldset")?.querySelector("legend");
-    if (legend?.textContent) return legend.textContent.trim();
-  }
-  const text = el.labels?.[0]?.getAttribute("data-sf-label") ?? el.labels?.[0]?.textContent ?? el.getAttribute("aria-label") ?? el.name;
-  return text.trim();
-}
-function useFieldErrors(formRef, options = {}) {
-  const m = fieldMessages(options.locale, options.messages);
-  const live = useRef(m);
-  live.current = m;
-  const server = [...options.serverFields ?? []];
-  const serverKey = server.join("|");
-  const [errors, setErrors] = useState(() => Object.fromEntries(server.map((n) => [n, options.serverMessages?.[n] ?? m.server])));
-  const [summary, setSummary] = useState(null);
-  const [summaryKey, setSummaryKey] = useState(0);
-  useEffect(() => {
-    if (!server.length) return;
-    const form = formRef.current;
-    const items = [];
-    const next = {};
-    for (const name of server) {
-      const msg = options.serverMessages?.[name] ?? live.current.server;
-      next[name] = msg;
-      const el = form?.elements.namedItem(name);
-      const ctl = el && "length" in el && !(el instanceof HTMLSelectElement) ? el[0] : el;
-      if (ctl) items.push({ name, id: ctl.id || name, label: labelOf(ctl), message: msg });
-    }
-    setErrors((e) => ({ ...e, ...next }));
-    if (items.length) {
-      setSummary(items);
-      setSummaryKey((k) => k + 1);
-    }
-  }, [serverKey]);
-  useEffect(() => {
-    const form = formRef.current;
-    if (!form) return;
-    let batch = null;
-    const set = (name, msg) => setErrors((e) => {
-      if (msg === null) {
-        if (!(name in e)) return e;
-        const { [name]: _gone, ...rest } = e;
-        return rest;
-      }
-      return e[name] === msg ? e : { ...e, [name]: msg };
-    });
-    const onBlur = (ev) => {
-      const el = ev.target;
-      if (!isControl(el) || el instanceof HTMLInputElement && (el.type === "radio" || el.type === "checkbox" || el.type === "hidden")) return;
-      if (!el.value) return;
-      set(el.name, validationMessage(el, live.current));
-    };
-    const onInput = (ev) => {
-      const el = ev.target;
-      if (!isControl(el)) return;
-      setErrors((e) => {
-        if (!(el.name in e)) return e;
-        const msg = el.validity.valid ? null : validationMessage(el, live.current);
-        if (msg !== null) return e;
-        const { [el.name]: _gone, ...rest } = e;
-        return rest;
-      });
-    };
-    const onInvalid = (ev) => {
-      const el = ev.target;
-      if (!isControl(el)) return;
-      ev.preventDefault();
-      if (!batch) {
-        batch = [];
-        queueMicrotask(() => {
-          const list = batch ?? [];
-          batch = null;
-          const seen = /* @__PURE__ */ new Set();
-          const items = [];
-          const next = {};
-          for (const c of list) {
-            if (seen.has(c.name)) continue;
-            seen.add(c.name);
-            const msg = validationMessage(c, live.current) ?? live.current.valueMissing;
-            next[c.name] = msg;
-            items.push({ name: c.name, id: c.id || c.name, label: labelOf(c), message: msg });
-          }
-          setErrors((e) => ({ ...e, ...next }));
-          setSummary(items);
-          setSummaryKey((k) => k + 1);
-        });
-      }
-      batch.push(el);
-    };
-    form.addEventListener("focusout", onBlur);
-    form.addEventListener("input", onInput);
-    form.addEventListener("change", onInput);
-    form.addEventListener("invalid", onInvalid, true);
-    return () => {
-      form.removeEventListener("focusout", onBlur);
-      form.removeEventListener("input", onInput);
-      form.removeEventListener("change", onInput);
-      form.removeEventListener("invalid", onInvalid, true);
-    };
-  }, [formRef]);
-  const shown = summary ? summary.filter((s) => s.name in errors).map((s) => ({ ...s, message: errors[s.name] })) : null;
-  return {
-    errors,
-    summary: shown && shown.length ? shown : null,
-    summaryKey,
-    clear: () => {
-      setErrors({});
-      setSummary(null);
-    }
-  };
-}
-function ErrorSummary({ items, focusKey, locale, messages, title, className, classNames: cx = {} }) {
-  const ref = useRef(null);
-  const m = fieldMessages(locale, messages);
-  const has = !!items && items.length > 0;
-  useEffect(() => {
-    if (has) ref.current?.focus();
-  }, [focusKey]);
-  if (!has) return null;
-  const n = items.length;
-  return /* @__PURE__ */ jsxs("div", { ref, role: "alert", tabIndex: -1, className, "data-sf-error-summary": true, "aria-labelledby": "sf-error-summary-title", children: [
-    /* @__PURE__ */ jsx("p", { id: "sf-error-summary-title", className: cx.title, "data-sf-error-summary-title": true, children: title ?? (n === 1 ? m.summaryOne : m.summaryMany.replace("{n}", String(n))) }),
-    /* @__PURE__ */ jsx("ul", { className: cx.list, children: items.map((it) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: `#${it.id}`,
-        className: cx.link,
-        onClick: (e) => {
-          const el = document.getElementById(it.id);
-          if (!el) return;
-          e.preventDefault();
-          el.focus();
-          el.scrollIntoView?.({ block: "center" });
-        },
-        children: [
-          it.label,
-          ": ",
-          it.message
-        ]
-      }
-    ) }, it.name)) })
-  ] });
-}
-function CheckoutField(props) {
-  const { name, label, id = name, error, hint, optional = false, classNames: cx = {}, locale, messages, ...rest } = props;
-  const m = fieldMessages(locale, messages);
-  const hintId = hint ? `${id}-hint` : void 0;
-  const errorId = `${id}-error`;
-  const describedBy = [hintId, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-  const common = {
-    id,
-    name,
-    required: !optional,
-    "aria-invalid": error ? true : void 0,
-    "aria-describedby": describedBy,
-    className: cx.input,
-    "data-sf-field-control": ""
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-field": true, "data-invalid": error ? "" : void 0, children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cx.label, "data-sf-label": label, children: [
-      label,
-      optional ? /* @__PURE__ */ jsxs("span", { className: cx.optional, "data-sf-field-optional": true, children: [
-        " ",
-        m.optional
-      ] }) : null
-    ] }),
-    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: cx.hint, "data-sf-field-hint": true, children: hint }) : null,
-    rest.as === "select" ? (() => {
-      const { as: _as, children, ...select } = rest;
-      return /* @__PURE__ */ jsx("select", { ...select, ...common, children });
-    })() : (() => {
-      const { as: _as, ...input } = rest;
-      return /* @__PURE__ */ jsx("input", { ...input, ...common });
-    })(),
-    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: cx.error, "data-sf-field-error": true, children: error }) : null
-  ] });
-}
-var ES2 = {
   email: "Correo",
   phone: "Tel\xE9fono",
   first_name: "Nombre",
@@ -243,7 +27,7 @@ var ES2 = {
   phoneHint: "Solo para la paqueter\xEDa, por si necesita contactarte.",
   lookupFilled: "Completamos estado y ciudad con tu c\xF3digo postal."
 };
-var EN2 = {
+var EN = {
   email: "Email",
   phone: "Phone",
   first_name: "First name",
@@ -263,7 +47,7 @@ var EN2 = {
   lookupFilled: "We filled in state and city from your postal code."
 };
 function addressFieldsMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
   return overrides ? { ...base, ...overrides } : base;
 }
 var join = (...c) => c.filter(Boolean).join(" ") || void 0;
@@ -377,7 +161,7 @@ function AddressFields(props) {
     children
   ] });
 }
-var ES3 = {
+var ES2 = {
   title: "Tu pedido",
   subtotal: "Subtotal",
   discount: "Descuento",
@@ -392,7 +176,7 @@ var ES3 = {
   show: "Ver resumen del pedido",
   hide: "Ocultar resumen del pedido"
 };
-var EN3 = {
+var EN2 = {
   title: "Your order",
   subtotal: "Subtotal",
   discount: "Discount",
@@ -408,7 +192,7 @@ var EN3 = {
   hide: "Hide order summary"
 };
 function orderSummaryMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN3 : ES3;
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
   return overrides ? { ...base, ...overrides } : base;
 }
 var isZero = (m) => !!m && Number(m.amount) === 0;
@@ -565,7 +349,7 @@ function recommendRates(input, options = {}) {
 }
 
 // src/checkout/delivery.ts
-var ES4 = {
+var ES3 = {
   etaOne: "Llega en 1 d\xEDa h\xE1bil",
   etaMany: "Llega en {n} d\xEDas h\xE1biles",
   etaRange: "Llega en {min} a {max} d\xEDas h\xE1biles",
@@ -588,7 +372,7 @@ var ES4 = {
   error: "No pudimos consultar las opciones de env\xEDo en este momento.",
   retry: "Intentar de nuevo"
 };
-var EN4 = {
+var EN3 = {
   etaOne: "Arrives in 1 business day",
   etaMany: "Arrives in {n} business days",
   etaRange: "Arrives in {min} to {max} business days",
@@ -612,7 +396,7 @@ var EN4 = {
   retry: "Try again"
 };
 function deliveryMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN4 : ES4;
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN3 : ES3;
   return overrides ? { ...base, ...overrides } : base;
 }
 var fill = (tpl, vars) => tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? "")).replace(/\.\.$/, ".");
@@ -632,7 +416,7 @@ function rateService(rate) {
   }
   return title;
 }
-function rateEta(rate, messages = ES4) {
+function rateEta(rate, messages = ES3) {
   const { eta_days_min: min, eta_days_max: max } = rate;
   if (typeof min === "number" && typeof max === "number") {
     if (min === max) return min === 1 ? messages.etaOne : fill(messages.etaMany, { n: min });
@@ -682,7 +466,7 @@ function quoteNote(deadline, opts = {}) {
   const now = opts.now ?? /* @__PURE__ */ new Date();
   const left = deadline.getTime() - now.getTime();
   if (left <= 0) return null;
-  const m = opts.messages ?? ES4;
+  const m = opts.messages ?? ES3;
   const locale = opts.locale ?? "es-MX";
   const tz = opts.timeZone ? { timeZone: opts.timeZone } : {};
   const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", ...tz }).format(deadline);
@@ -845,6 +629,6 @@ function DeliveryOptions(props) {
   ] });
 }
 
-export { AddressFields, CheckoutField, ContactFields, DeliveryOptions, ErrorSummary, OrderSummary, OrderSummaryDisclosure, addressFieldsMessages, dedupeRates, deliveryMessages, fieldMessages, isQuoteChange, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates, useFieldErrors, validationMessage };
+export { AddressFields, ContactFields, DeliveryOptions, OrderSummary, OrderSummaryDisclosure, addressFieldsMessages, dedupeRates, deliveryMessages, isQuoteChange, matchRate, orderSummaryMessages, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService, recommendRates };
 //# sourceMappingURL=checkout.js.map
 //# sourceMappingURL=checkout.js.map