@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/address-book-advanced/components/address-form.js

@@ -0,0 +1,699 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var address_form_exports = {};
+__export(address_form_exports, {
+  AddressForm: () => AddressForm
+});
+module.exports = __toCommonJS(address_form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_countries = require("../countries.js");
+var import_helpers = require("../helpers.js");
+var import_validation = require("../validation.js");
+const CONTROL = "mt-1 h-9 w-full rounded-md border border-border bg-background px-3 text-sm text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none aria-invalid:border-destructive";
+const AREA = "mt-1 min-h-20 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none aria-invalid:border-destructive";
+function Field({ id, label, required, error, help, className, children }) {
+  const described = [help ? `${id}-help` : null, error ? `${id}-error` : null].filter(Boolean).join(" ");
+  const child = (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, {
+    "aria-describedby": described || void 0,
+    "aria-required": required || void 0
+  }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `min-w-0 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: id, className: "text-sm font-medium text-foreground", children: [
+      label,
+      required ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "ml-1 text-destructive", children: "*" }) : null
+    ] }),
+    child,
+    help ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${id}-help`, className: "mt-1 text-xs text-muted-foreground", children: help }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: `${id}-error`, role: "alert", className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+function draftFrom(initial) {
+  return {
+    ...initial,
+    recipient: { ...initial.recipient },
+    company: initial.company ? { ...initial.company } : void 0,
+    postal: { ...initial.postal },
+    defaults: { ...initial.defaults }
+  };
+}
+function AddressForm({
+  mode,
+  initial,
+  countries,
+  addressLabels,
+  config,
+  labels,
+  presentation,
+  simple = false,
+  focusTrap = true,
+  submitting = false,
+  serverErrors,
+  others = [],
+  onSubmit,
+  onCancel,
+  onDirtyChange
+}) {
+  const uid = (0, import_react.useId)();
+  const [values, setValues] = (0, import_react.useState)(() => draftFrom(initial));
+  const [touched, setTouched] = (0, import_react.useState)({});
+  const [submitted, setSubmitted] = (0, import_react.useState)(false);
+  const [countryNotice, setCountryNotice] = (0, import_react.useState)(false);
+  const initialJson = (0, import_react.useRef)(JSON.stringify(draftFrom(initial)));
+  const submitGuard = (0, import_react.useRef)(false);
+  const shellRef = (0, import_react.useRef)(null);
+  const cancelRef = (0, import_react.useRef)(onCancel);
+  const dirtyRef = (0, import_react.useRef)(onDirtyChange);
+  cancelRef.current = onCancel;
+  dirtyRef.current = onDirtyChange;
+  const dirty = JSON.stringify(values) !== initialJson.current;
+  const isDialog = (presentation ?? config.presentation.formMode) !== "embedded" && (presentation ?? config.presentation.formMode) !== "page";
+  (0, import_react.useEffect)(() => {
+    dirtyRef.current?.(dirty);
+  }, [dirty]);
+  (0, import_react.useEffect)(() => {
+    if (!submitting) submitGuard.current = false;
+  }, [submitting]);
+  (0, import_react.useEffect)(() => {
+    if (!isDialog || !focusTrap) return;
+    const shell = shellRef.current;
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const selector = "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href]";
+    const focusables = () => Array.from(shell?.querySelectorAll(selector) ?? []);
+    focusables()[0]?.focus();
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancelRef.current();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const items = focusables();
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      previous?.focus();
+    };
+  }, [isDialog, focusTrap]);
+  const validation = (0, import_validation.validateDraft)(values, config, countries, others);
+  const country = (0, import_countries.getCountry)(countries, values.postal.countryCode);
+  const regions = country ? (0, import_countries.regionNames)(country) : [];
+  const cities = country ? (0, import_countries.citiesFor)(country, values.postal.region) : [];
+  const allowed = countries.filter(
+    (entry) => config.allowedCountries.length === 0 || config.allowedCountries.includes(entry.code)
+  );
+  const fieldId = (path) => `${uid}-${path.replace(/\./g, "-")}`;
+  const errorFor = (path) => {
+    const server = serverErrors?.[path];
+    if (server) return server;
+    if (!submitted && !touched[path]) return void 0;
+    const code = validation.errors[path];
+    if (!code) return void 0;
+    return labels.errors[code] ?? labels.errors.required;
+  };
+  const describedBy = (path, help) => {
+    const ids = [help ? `${fieldId(path)}-help` : null, errorFor(path) ? `${fieldId(path)}-error` : null];
+    return ids.filter(Boolean).join(" ") || void 0;
+  };
+  const touch = (path) => setTouched((current) => ({ ...current, [path]: true }));
+  const setRecipient = (patch) => setValues((current) => ({
+    ...current,
+    recipient: { ...current.recipient, ...patch }
+  }));
+  const setCompany = (patch) => setValues((current) => ({
+    ...current,
+    company: { name: "", ...current.company, ...patch }
+  }));
+  const setPostal = (patch) => setValues((current) => ({
+    ...current,
+    postal: { ...current.postal, ...patch }
+  }));
+  const changeCountry = (code) => {
+    const next = (0, import_countries.getCountry)(countries, code);
+    setValues((current) => {
+      const result = (0, import_helpers.applyCountryChange)(current.postal, next);
+      setCountryNotice(result.cleared);
+      return { ...current, postal: result.postal };
+    });
+  };
+  const focusFirstInvalid = () => {
+    const first = Object.keys(validation.errors)[0];
+    if (!first) return;
+    document.getElementById(fieldId(first))?.focus();
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setSubmitted(true);
+    if (Object.keys(validation.errors).length > 0) {
+      focusFirstInvalid();
+      return;
+    }
+    if (submitGuard.current || submitting) return;
+    submitGuard.current = true;
+    const draft = {
+      ...values,
+      company: values.owner === "business" ? values.company : void 0
+    };
+    onSubmit(draft);
+  };
+  const reset = () => {
+    setValues(draftFrom(initial));
+    setTouched({});
+    setSubmitted(false);
+    setCountryNotice(false);
+  };
+  const showCompany = values.owner === "business" && !simple;
+  const requireRegion = config.requiredFields.region;
+  const requirePhone = config.requiredFields.phone;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: shellRef, className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { noValidate: true, onSubmit: handleSubmit, className: "space-y-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.requiredHint }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "space-y-3 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "px-1 text-sm font-semibold text-foreground", children: labels.sections.identity }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        !simple ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("owner"), label: labels.fields.owner, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "select",
+          {
+            id: fieldId("owner"),
+            className: CONTROL,
+            value: values.owner,
+            onChange: (event) => setValues((current) => ({
+              ...current,
+              owner: event.target.value
+            })),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "personal", children: labels.options.personal }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "business", children: labels.options.business })
+            ]
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("labelId"), label: labels.fields.label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "select",
+          {
+            id: fieldId("labelId"),
+            className: CONTROL,
+            value: values.labelId ?? "",
+            onChange: (event) => setValues((current) => ({ ...current, labelId: event.target.value || void 0 })),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: labels.placeholders.customLabel }),
+              addressLabels.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: entry.id, children: entry.label }, entry.id))
+            ]
+          }
+        ) }),
+        config.features.customLabels && !simple ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("customLabel"), label: labels.fields.customLabel, help: labels.helps.optional, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: fieldId("customLabel"),
+            className: CONTROL,
+            value: values.customLabel ?? "",
+            placeholder: labels.placeholders.customLabel,
+            onChange: (event) => setValues((current) => ({
+              ...current,
+              customLabel: event.target.value || void 0
+            }))
+          }
+        ) }) : null,
+        showCompany ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("company.branchCode"), label: labels.fields.branch, help: labels.helps.branch, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: fieldId("company.branchCode"),
+            className: CONTROL,
+            value: values.company?.branchCode ?? "",
+            placeholder: labels.placeholders.branch,
+            onChange: (event) => setCompany({ branchCode: event.target.value })
+          }
+        ) }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "space-y-3 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "px-1 text-sm font-semibold text-foreground", children: labels.sections.recipient }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("recipient.firstName"),
+            label: labels.fields.firstName,
+            required: true,
+            error: errorFor("recipient.firstName"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("recipient.firstName"),
+                className: CONTROL,
+                value: values.recipient.firstName,
+                placeholder: labels.placeholders.firstName,
+                "aria-invalid": Boolean(errorFor("recipient.firstName")),
+                "aria-describedby": describedBy("recipient.firstName"),
+                onChange: (event) => setRecipient({ firstName: event.target.value }),
+                onBlur: () => touch("recipient.firstName")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("recipient.lastName"),
+            label: labels.fields.lastName,
+            required: true,
+            error: errorFor("recipient.lastName"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("recipient.lastName"),
+                className: CONTROL,
+                value: values.recipient.lastName,
+                placeholder: labels.placeholders.lastName,
+                "aria-invalid": Boolean(errorFor("recipient.lastName")),
+                "aria-describedby": describedBy("recipient.lastName"),
+                onChange: (event) => setRecipient({ lastName: event.target.value }),
+                onBlur: () => touch("recipient.lastName")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("recipient.phone"),
+            label: labels.fields.phone,
+            required: requirePhone,
+            help: requirePhone ? void 0 : labels.helps.optional,
+            error: errorFor("recipient.phone"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("recipient.phone"),
+                type: "tel",
+                className: CONTROL,
+                value: values.recipient.phone ?? "",
+                placeholder: labels.placeholders.phone,
+                "aria-invalid": Boolean(errorFor("recipient.phone")),
+                "aria-describedby": describedBy("recipient.phone", !requirePhone),
+                onChange: (event) => setRecipient({ phone: event.target.value || void 0 }),
+                onBlur: () => touch("recipient.phone")
+              }
+            )
+          }
+        ),
+        !simple ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: fieldId("recipient.secondaryPhone"),
+              label: labels.fields.secondaryPhone,
+              help: labels.helps.optional,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  id: fieldId("recipient.secondaryPhone"),
+                  type: "tel",
+                  className: CONTROL,
+                  value: values.recipient.secondaryPhone ?? "",
+                  placeholder: labels.placeholders.phone,
+                  onChange: (event) => setRecipient({ secondaryPhone: event.target.value || void 0 })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Field,
+            {
+              id: fieldId("recipient.deliveryContact"),
+              label: labels.fields.deliveryContact,
+              help: labels.helps.optional,
+              className: "sm:col-span-2",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  id: fieldId("recipient.deliveryContact"),
+                  className: CONTROL,
+                  value: values.recipient.deliveryContact ?? "",
+                  placeholder: labels.placeholders.deliveryContact,
+                  onChange: (event) => setRecipient({ deliveryContact: event.target.value || void 0 })
+                }
+              )
+            }
+          )
+        ] }) : null
+      ] })
+    ] }),
+    showCompany ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "space-y-3 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "px-1 text-sm font-semibold text-foreground", children: labels.sections.company }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("company.name"),
+            label: labels.fields.companyName,
+            required: true,
+            error: errorFor("company.name"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("company.name"),
+                className: CONTROL,
+                value: values.company?.name ?? "",
+                placeholder: labels.placeholders.companyName,
+                "aria-invalid": Boolean(errorFor("company.name")),
+                "aria-describedby": describedBy("company.name"),
+                onChange: (event) => setCompany({ name: event.target.value }),
+                onBlur: () => touch("company.name")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("company.locationName"), label: labels.fields.locationName, help: labels.helps.optional, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: fieldId("company.locationName"),
+            className: CONTROL,
+            value: values.company?.locationName ?? "",
+            placeholder: labels.placeholders.locationName,
+            onChange: (event) => setCompany({ locationName: event.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("company.department"), label: labels.fields.department, help: labels.helps.optional, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: fieldId("company.department"),
+            className: CONTROL,
+            value: values.company?.department ?? "",
+            placeholder: labels.placeholders.department,
+            onChange: (event) => setCompany({ department: event.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, { id: fieldId("company.reference"), label: labels.fields.reference, help: labels.helps.optional, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: fieldId("company.reference"),
+            className: CONTROL,
+            value: values.company?.reference ?? "",
+            placeholder: labels.placeholders.reference,
+            onChange: (event) => setCompany({ reference: event.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("company.taxId"),
+            label: `${labels.fields.taxId}${country?.taxIdLabel ? ` (${country.taxIdLabel})` : ""}`,
+            help: labels.helps.taxId,
+            className: "sm:col-span-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("company.taxId"),
+                className: CONTROL,
+                value: values.company?.taxId ?? "",
+                onChange: (event) => setCompany({ taxId: event.target.value })
+              }
+            )
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "space-y-3 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "px-1 text-sm font-semibold text-foreground", children: labels.sections.postal }),
+      countryNotice ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", className: "text-xs text-muted-foreground", children: labels.countryChanged }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.countryCode"),
+            label: labels.fields.country,
+            required: true,
+            error: errorFor("postal.countryCode"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "select",
+              {
+                id: fieldId("postal.countryCode"),
+                className: CONTROL,
+                value: values.postal.countryCode,
+                "aria-invalid": Boolean(errorFor("postal.countryCode")),
+                "aria-describedby": describedBy("postal.countryCode"),
+                onChange: (event) => changeCountry(event.target.value),
+                onBlur: () => touch("postal.countryCode"),
+                children: allowed.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: entry.code, children: entry.name }, entry.code))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.line1"),
+            label: labels.fields.line1,
+            required: true,
+            error: errorFor("postal.line1"),
+            className: "sm:col-span-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("postal.line1"),
+                className: CONTROL,
+                value: values.postal.line1,
+                placeholder: labels.placeholders.line1,
+                "aria-invalid": Boolean(errorFor("postal.line1")),
+                "aria-describedby": describedBy("postal.line1"),
+                onChange: (event) => setPostal({ line1: event.target.value }),
+                onBlur: () => touch("postal.line1")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.line2"),
+            label: labels.fields.line2,
+            help: labels.helps.optional,
+            className: "sm:col-span-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("postal.line2"),
+                className: CONTROL,
+                value: values.postal.line2 ?? "",
+                placeholder: labels.placeholders.line2,
+                onChange: (event) => setPostal({ line2: event.target.value || void 0 })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.region"),
+            label: country?.regionLabel ?? labels.fields.region,
+            required: requireRegion,
+            error: errorFor("postal.region"),
+            children: regions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "select",
+              {
+                id: fieldId("postal.region"),
+                className: CONTROL,
+                value: values.postal.region,
+                "aria-invalid": Boolean(errorFor("postal.region")),
+                "aria-describedby": describedBy("postal.region"),
+                onChange: (event) => setPostal({ region: event.target.value, city: "" }),
+                onBlur: () => touch("postal.region"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: labels.placeholders.region }),
+                  regions.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: name, children: name }, name))
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("postal.region"),
+                className: CONTROL,
+                value: values.postal.region,
+                placeholder: labels.placeholders.region,
+                "aria-invalid": Boolean(errorFor("postal.region")),
+                "aria-describedby": describedBy("postal.region"),
+                onChange: (event) => setPostal({ region: event.target.value }),
+                onBlur: () => touch("postal.region")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.city"),
+            label: country?.cityLabel ?? labels.fields.city,
+            required: true,
+            error: errorFor("postal.city"),
+            children: cities.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "select",
+              {
+                id: fieldId("postal.city"),
+                className: CONTROL,
+                value: values.postal.city,
+                "aria-invalid": Boolean(errorFor("postal.city")),
+                "aria-describedby": describedBy("postal.city"),
+                onChange: (event) => setPostal({ city: event.target.value }),
+                onBlur: () => touch("postal.city"),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: labels.placeholders.city }),
+                  cities.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: name, children: name }, name))
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("postal.city"),
+                className: CONTROL,
+                value: values.postal.city,
+                placeholder: labels.placeholders.city,
+                "aria-invalid": Boolean(errorFor("postal.city")),
+                "aria-describedby": describedBy("postal.city"),
+                onChange: (event) => setPostal({ city: event.target.value }),
+                onBlur: () => touch("postal.city")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.postalCode"),
+            label: country?.postalLabel ?? labels.fields.postalCode,
+            required: Boolean(country?.postalRequired),
+            error: errorFor("postal.postalCode"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                id: fieldId("postal.postalCode"),
+                inputMode: "numeric",
+                className: CONTROL,
+                value: values.postal.postalCode ?? "",
+                placeholder: labels.placeholders.postalCode,
+                "aria-invalid": Boolean(errorFor("postal.postalCode")),
+                "aria-describedby": describedBy("postal.postalCode"),
+                onChange: (event) => setPostal({ postalCode: event.target.value || void 0 }),
+                onBlur: () => touch("postal.postalCode")
+              }
+            )
+          }
+        ),
+        !simple ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Field,
+          {
+            id: fieldId("postal.instructions"),
+            label: labels.fields.instructions,
+            help: labels.helps.optional,
+            className: "sm:col-span-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "textarea",
+              {
+                id: fieldId("postal.instructions"),
+                className: AREA,
+                value: values.postal.instructions ?? "",
+                placeholder: labels.placeholders.instructions,
+                onChange: (event) => setPostal({ instructions: event.target.value || void 0 })
+              }
+            )
+          }
+        ) : null
+      ] })
+    ] }),
+    config.features.defaultAddresses ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "space-y-2 rounded-lg border border-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { className: "px-1 text-sm font-semibold text-foreground", children: labels.sections.defaults }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "h-4 w-4 rounded border-border",
+            checked: values.defaults.shipping,
+            onChange: (event) => setValues((current) => ({
+              ...current,
+              defaults: { ...current.defaults, shipping: event.target.checked }
+            }))
+          }
+        ),
+        labels.fields.defaultShipping
+      ] }),
+      config.features.billingAddresses ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "h-4 w-4 rounded border-border",
+            checked: values.defaults.billing,
+            onChange: (event) => setValues((current) => ({
+              ...current,
+              defaults: { ...current.defaults, billing: event.target.checked }
+            }))
+          }
+        ),
+        labels.fields.defaultBilling
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.helps.defaults })
+    ] }) : null,
+    validation.warnings.duplicate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", className: "text-xs text-muted-foreground", children: labels.errors.duplicate }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 sm:flex-row sm:justify-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "h-9 rounded-md border border-border px-3 text-sm text-foreground hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          onClick: reset,
+          children: labels.reset
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "h-9 rounded-md border border-border px-3 text-sm text-foreground hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          onClick: onCancel,
+          children: labels.cancel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: submitting,
+          "aria-busy": submitting,
+          className: "h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:opacity-60",
+          children: submitting ? labels.saving : mode === "create" ? labels.submitCreate : labels.submitEdit
+        }
+      )
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddressForm
+});
+//# sourceMappingURL=address-form.js.map