@thorprovider/blocks 3.0.2 → 4.0.0

package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.mjs

@@ -1,80 +1,94 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Field, FieldContent, FieldGroup, FieldLabel } from "../../../ui/field.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Field, FieldGroup, FieldLabel } from "../../../ui/field.mjs";
 import { Input } from "../../../ui/input.mjs";
-import { CheckboxCheck } from "./checkbox-check.mjs";
 import { CheckoutFieldFeedback, checkoutFieldAria } from "./checkout-field-feedback.mjs";
+import { useCheckoutIds } from "./checkout-id-context.mjs";
 function CheckoutContactStep({
-  values,
+  contact,
   onChange,
+  customer,
+  onSignIn,
+  onSignOut,
+  requirePhone = false,
   labels,
-  showSaveInfo,
-  showNewsletter,
   fieldErrors,
   fieldDescriptions
 }) {
+  const checkoutId = useCheckoutIds();
+  const displayName = [customer?.firstName, customer?.lastName].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(FieldGroup, { className: "grid grid-cols-1 gap-4", children: [
-    /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.email?.length, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-email", children: labels.emailLabel }),
+    customer ? /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 flex flex-wrap items-center justify-between gap-3 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+        labels.signedInAsLabel,
+        " ",
+        displayName ? `${displayName} <${customer.email}>` : customer.email
+      ] }) }),
+      onSignOut ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onSignOut, children: labels.signOutLabel }) : null
+    ] }) : /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.email?.length, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: checkoutId("checkout-email"), children: labels.emailLabel }),
       /* @__PURE__ */ jsx(
         Input,
         {
-          id: "checkout-email",
+          id: checkoutId("checkout-email"),
+          "data-checkout-field": "email",
           type: "email",
           inputMode: "email",
           autoComplete: "email",
-          value: values.email,
+          value: contact.email,
           onChange: (e) => onChange("email", e.target.value),
-          ...checkoutFieldAria("checkout-email", fieldErrors?.email)
+          ...checkoutFieldAria(checkoutId("checkout-email"), fieldErrors?.email)
         }
       ),
       /* @__PURE__ */ jsx(
         CheckoutFieldFeedback,
         {
-          id: "checkout-email",
+          id: checkoutId("checkout-email"),
           errors: fieldErrors?.email,
           description: fieldDescriptions?.email
         }
-      )
+      ),
+      onSignIn ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", className: "w-fit px-0", onClick: onSignIn, children: labels.signInLabel }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
       /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.firstName?.length, children: [
-        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-first-name", children: labels.firstNameLabel }),
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: checkoutId("checkout-first-name"), children: labels.firstNameLabel }),
         /* @__PURE__ */ jsx(
           Input,
           {
-            id: "checkout-first-name",
+            id: checkoutId("checkout-first-name"),
             autoComplete: "given-name",
-            value: values.firstName,
+            value: contact.firstName,
             onChange: (e) => onChange("firstName", e.target.value),
-            ...checkoutFieldAria("checkout-first-name", fieldErrors?.firstName)
+            ...checkoutFieldAria(checkoutId("checkout-first-name"), fieldErrors?.firstName)
           }
         ),
         /* @__PURE__ */ jsx(
           CheckoutFieldFeedback,
           {
-            id: "checkout-first-name",
+            id: checkoutId("checkout-first-name"),
             errors: fieldErrors?.firstName,
             description: fieldDescriptions?.firstName
           }
         )
       ] }),
       /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.lastName?.length, children: [
-        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-last-name", children: labels.lastNameLabel }),
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: checkoutId("checkout-last-name"), children: labels.lastNameLabel }),
         /* @__PURE__ */ jsx(
           Input,
           {
-            id: "checkout-last-name",
+            id: checkoutId("checkout-last-name"),
             autoComplete: "family-name",
-            value: values.lastName,
+            value: contact.lastName,
             onChange: (e) => onChange("lastName", e.target.value),
-            ...checkoutFieldAria("checkout-last-name", fieldErrors?.lastName)
+            ...checkoutFieldAria(checkoutId("checkout-last-name"), fieldErrors?.lastName)
           }
         ),
         /* @__PURE__ */ jsx(
           CheckoutFieldFeedback,
           {
-            id: "checkout-last-name",
+            id: checkoutId("checkout-last-name"),
             errors: fieldErrors?.lastName,
             description: fieldDescriptions?.lastName
           }
@@ -82,72 +96,36 @@ function CheckoutContactStep({
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Field, { "data-invalid": !!fieldErrors?.phone?.length, children: [
-      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-phone", children: labels.phoneLabel }),
+      /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: checkoutId("checkout-phone"), children: [
+        labels.phoneLabel,
+        !requirePhone ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " (",
+          labels.optionalIndicatorLabel,
+          ")"
+        ] }) : null
+      ] }),
       /* @__PURE__ */ jsx(
         Input,
         {
-          id: "checkout-phone",
+          id: checkoutId("checkout-phone"),
           type: "tel",
           inputMode: "tel",
           autoComplete: "tel",
-          value: values.phone,
+          "aria-required": requirePhone || void 0,
+          value: contact.phone,
           onChange: (e) => onChange("phone", e.target.value),
-          ...checkoutFieldAria("checkout-phone", fieldErrors?.phone)
+          ...checkoutFieldAria(checkoutId("checkout-phone"), fieldErrors?.phone)
         }
       ),
       /* @__PURE__ */ jsx(
         CheckoutFieldFeedback,
         {
-          id: "checkout-phone",
+          id: checkoutId("checkout-phone"),
           errors: fieldErrors?.phone,
           description: fieldDescriptions?.phone
         }
       )
-    ] }),
-    showSaveInfo ? /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", className: "gap-2", "data-invalid": !!fieldErrors?.saveInfo?.length, children: [
-      /* @__PURE__ */ jsx(
-        CheckboxCheck,
-        {
-          id: "checkout-save-info",
-          checked: values.saveInfo,
-          onCheckedChange: (checked) => onChange("saveInfo", checked === true),
-          ...checkoutFieldAria("checkout-save-info", fieldErrors?.saveInfo)
-        }
-      ),
-      /* @__PURE__ */ jsxs(FieldContent, { children: [
-        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-save-info", className: "text-sm font-normal", children: labels.saveInfoLabel }),
-        /* @__PURE__ */ jsx(
-          CheckoutFieldFeedback,
-          {
-            id: "checkout-save-info",
-            errors: fieldErrors?.saveInfo,
-            description: fieldDescriptions?.saveInfo
-          }
-        )
-      ] })
-    ] }) : null,
-    showNewsletter ? /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", className: "gap-2", "data-invalid": !!fieldErrors?.newsletter?.length, children: [
-      /* @__PURE__ */ jsx(
-        CheckboxCheck,
-        {
-          id: "checkout-newsletter",
-          checked: values.newsletter,
-          onCheckedChange: (checked) => onChange("newsletter", checked === true),
-          ...checkoutFieldAria("checkout-newsletter", fieldErrors?.newsletter)
-        }
-      ),
-      /* @__PURE__ */ jsxs(FieldContent, { children: [
-        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-newsletter", className: "text-sm font-normal", children: labels.newsletterLabel }),
-        /* @__PURE__ */ jsx(
-          CheckoutFieldFeedback,
-          {
-            id: "checkout-newsletter",
-            errors: fieldErrors?.newsletter,
-            description: fieldDescriptions?.newsletter
-          }
-        )
-      ] })
-    ] }) : null
+    ] })
   ] });
 }
 export {

package/dist/blocks/e-commerce/checkout-forms/checkout-contact-step.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-contact-step.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldContent, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { CheckboxCheck } from './checkbox-check'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type {\n  CheckoutChangeHandler,\n  CheckoutFieldDescriptions,\n  CheckoutValuesFieldErrors,\n  CheckoutLabels,\n  CheckoutValues,\n} from './checkout'\n\nexport interface CheckoutContactStepProps {\n  values: CheckoutValues\n  onChange: CheckoutChangeHandler\n  labels: CheckoutLabels\n  /** Rendered only when the host supplies the corresponding label. */\n  showSaveInfo: boolean\n  showNewsletter: boolean\n  fieldErrors?: CheckoutValuesFieldErrors\n  fieldDescriptions?: CheckoutFieldDescriptions\n}\n\nexport function CheckoutContactStep({\n  values,\n  onChange,\n  labels,\n  showSaveInfo,\n  showNewsletter,\n  fieldErrors,\n  fieldDescriptions,\n}: CheckoutContactStepProps) {\n  return (\n    <FieldGroup className=\"grid grid-cols-1 gap-4\">\n      <Field data-invalid={!!fieldErrors?.email?.length}>\n        <FieldLabel htmlFor=\"checkout-email\">{labels.emailLabel}</FieldLabel>\n        <Input\n          id=\"checkout-email\"\n          type=\"email\"\n          inputMode=\"email\"\n          autoComplete=\"email\"\n          value={values.email}\n          onChange={(e) => onChange('email', e.target.value)}\n          {...checkoutFieldAria('checkout-email', fieldErrors?.email)}\n        />\n        <CheckoutFieldFeedback\n          id=\"checkout-email\"\n          errors={fieldErrors?.email}\n          description={fieldDescriptions?.email}\n        />\n      </Field>\n\n      <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n        <Field data-invalid={!!fieldErrors?.firstName?.length}>\n          <FieldLabel htmlFor=\"checkout-first-name\">{labels.firstNameLabel}</FieldLabel>\n          <Input\n            id=\"checkout-first-name\"\n            autoComplete=\"given-name\"\n            value={values.firstName}\n            onChange={(e) => onChange('firstName', e.target.value)}\n            {...checkoutFieldAria('checkout-first-name', fieldErrors?.firstName)}\n          />\n          <CheckoutFieldFeedback\n            id=\"checkout-first-name\"\n            errors={fieldErrors?.firstName}\n            description={fieldDescriptions?.firstName}\n          />\n        </Field>\n        <Field data-invalid={!!fieldErrors?.lastName?.length}>\n          <FieldLabel htmlFor=\"checkout-last-name\">{labels.lastNameLabel}</FieldLabel>\n          <Input\n            id=\"checkout-last-name\"\n            autoComplete=\"family-name\"\n            value={values.lastName}\n            onChange={(e) => onChange('lastName', e.target.value)}\n            {...checkoutFieldAria('checkout-last-name', fieldErrors?.lastName)}\n          />\n          <CheckoutFieldFeedback\n            id=\"checkout-last-name\"\n            errors={fieldErrors?.lastName}\n            description={fieldDescriptions?.lastName}\n          />\n        </Field>\n      </div>\n\n      <Field data-invalid={!!fieldErrors?.phone?.length}>\n        <FieldLabel htmlFor=\"checkout-phone\">{labels.phoneLabel}</FieldLabel>\n        <Input\n          id=\"checkout-phone\"\n          type=\"tel\"\n          inputMode=\"tel\"\n          autoComplete=\"tel\"\n          value={values.phone}\n          onChange={(e) => onChange('phone', e.target.value)}\n          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}\n        />\n        <CheckoutFieldFeedback\n          id=\"checkout-phone\"\n          errors={fieldErrors?.phone}\n          description={fieldDescriptions?.phone}\n        />\n      </Field>\n\n      {showSaveInfo ? (\n        <Field orientation=\"horizontal\" className=\"gap-2\" data-invalid={!!fieldErrors?.saveInfo?.length}>\n          <CheckboxCheck\n            id=\"checkout-save-info\"\n            checked={values.saveInfo}\n            onCheckedChange={(checked) => onChange('saveInfo', checked === true)}\n            {...checkoutFieldAria('checkout-save-info', fieldErrors?.saveInfo)}\n          />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkout-save-info\" className=\"text-sm font-normal\">\n              {labels.saveInfoLabel}\n            </FieldLabel>\n            <CheckoutFieldFeedback\n              id=\"checkout-save-info\"\n              errors={fieldErrors?.saveInfo}\n              description={fieldDescriptions?.saveInfo}\n            />\n          </FieldContent>\n        </Field>\n      ) : null}\n\n      {showNewsletter ? (\n        <Field orientation=\"horizontal\" className=\"gap-2\" data-invalid={!!fieldErrors?.newsletter?.length}>\n          <CheckboxCheck\n            id=\"checkout-newsletter\"\n            checked={values.newsletter}\n            onCheckedChange={(checked) => onChange('newsletter', checked === true)}\n            {...checkoutFieldAria('checkout-newsletter', fieldErrors?.newsletter)}\n          />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkout-newsletter\" className=\"text-sm font-normal\">\n              {labels.newsletterLabel}\n            </FieldLabel>\n            <CheckoutFieldFeedback\n              id=\"checkout-newsletter\"\n              errors={fieldErrors?.newsletter}\n              description={fieldDescriptions?.newsletter}\n            />\n          </FieldContent>\n        </Field>\n      ) : null}\n    </FieldGroup>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-contact-step.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '../../../ui/button'\nimport { Field, FieldGroup, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport type { CheckoutContactValues, CheckoutCustomerIdentity } from '@thorprovider/types'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type {\n  CheckoutContactChangeHandler,\n  CheckoutLabels,\n} from './checkout'\n\nexport interface CheckoutContactStepProps {\n  contact: CheckoutContactValues\n  onChange: CheckoutContactChangeHandler\n  customer?: CheckoutCustomerIdentity | null\n  onSignIn?: () => void\n  onSignOut?: () => void\n  requirePhone?: boolean\n  labels: CheckoutLabels\n  fieldErrors?: Partial<Record<keyof CheckoutContactValues, CheckoutFieldError[]>>\n  fieldDescriptions?: Partial<Record<keyof CheckoutContactValues, string>>\n}\n\nexport function CheckoutContactStep({\n  contact,\n  onChange,\n  customer,\n  onSignIn,\n  onSignOut,\n  requirePhone = false,\n  labels,\n  fieldErrors,\n  fieldDescriptions,\n}: CheckoutContactStepProps) {\n  const checkoutId = useCheckoutIds()\n  const displayName = [customer?.firstName, customer?.lastName].filter(Boolean).join(' ')\n\n  return (\n    <FieldGroup className=\"grid grid-cols-1 gap-4\">\n      {customer ? (\n        <div className=\"bg-muted/50 flex flex-wrap items-center justify-between gap-3 rounded-lg p-4\">\n          <div className=\"min-w-0\">\n            <p className=\"text-sm font-medium\">\n              {labels.signedInAsLabel}{' '}\n              {displayName ? `${displayName} <${customer.email}>` : customer.email}\n            </p>\n          </div>\n          {onSignOut ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onSignOut}>\n              {labels.signOutLabel}\n            </Button>\n          ) : null}\n        </div>\n      ) : (\n        <Field data-invalid={!!fieldErrors?.email?.length}>\n          <FieldLabel htmlFor={checkoutId('checkout-email')}>{labels.emailLabel}</FieldLabel>\n          <Input\n            id={checkoutId('checkout-email')}\n            data-checkout-field=\"email\"\n            type=\"email\"\n            inputMode=\"email\"\n            autoComplete=\"email\"\n            value={contact.email}\n            onChange={(e) => onChange('email', e.target.value)}\n            {...checkoutFieldAria(checkoutId('checkout-email'), fieldErrors?.email)}\n          />\n          <CheckoutFieldFeedback\n            id={checkoutId('checkout-email')}\n            errors={fieldErrors?.email}\n            description={fieldDescriptions?.email}\n          />\n          {onSignIn ? (\n            <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"w-fit px-0\" onClick={onSignIn}>\n              {labels.signInLabel}\n            </Button>\n          ) : null}\n        </Field>\n      )}\n\n      <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n        <Field data-invalid={!!fieldErrors?.firstName?.length}>\n          <FieldLabel htmlFor={checkoutId('checkout-first-name')}>{labels.firstNameLabel}</FieldLabel>\n          <Input\n            id={checkoutId('checkout-first-name')}\n            autoComplete=\"given-name\"\n            value={contact.firstName}\n            onChange={(e) => onChange('firstName', e.target.value)}\n            {...checkoutFieldAria(checkoutId('checkout-first-name'), fieldErrors?.firstName)}\n          />\n          <CheckoutFieldFeedback\n            id={checkoutId('checkout-first-name')}\n            errors={fieldErrors?.firstName}\n            description={fieldDescriptions?.firstName}\n          />\n        </Field>\n        <Field data-invalid={!!fieldErrors?.lastName?.length}>\n          <FieldLabel htmlFor={checkoutId('checkout-last-name')}>{labels.lastNameLabel}</FieldLabel>\n          <Input\n            id={checkoutId('checkout-last-name')}\n            autoComplete=\"family-name\"\n            value={contact.lastName}\n            onChange={(e) => onChange('lastName', e.target.value)}\n            {...checkoutFieldAria(checkoutId('checkout-last-name'), fieldErrors?.lastName)}\n          />\n          <CheckoutFieldFeedback\n            id={checkoutId('checkout-last-name')}\n            errors={fieldErrors?.lastName}\n            description={fieldDescriptions?.lastName}\n          />\n        </Field>\n      </div>\n\n      <Field data-invalid={!!fieldErrors?.phone?.length}>\n        <FieldLabel htmlFor={checkoutId('checkout-phone')}>\n          {labels.phoneLabel}\n          {!requirePhone ? (\n            <span className=\"text-muted-foreground\"> ({labels.optionalIndicatorLabel})</span>\n          ) : null}\n        </FieldLabel>\n        <Input\n          id={checkoutId('checkout-phone')}\n          type=\"tel\"\n          inputMode=\"tel\"\n          autoComplete=\"tel\"\n          aria-required={requirePhone || undefined}\n          value={contact.phone}\n          onChange={(e) => onChange('phone', e.target.value)}\n          {...checkoutFieldAria(checkoutId('checkout-phone'), fieldErrors?.phone)}\n        />\n        <CheckoutFieldFeedback\n          id={checkoutId('checkout-phone')}\n          errors={fieldErrors?.phone}\n          description={fieldDescriptions?.phone}\n        />\n      </Field>\n    </FieldGroup>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-country-field.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEvE,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,qBAAqB,EAAE,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EACb,MAAM,EACN,WAAW,GACZ,EAAE,yBAAyB,+BAqB3B"}
+{"version":3,"file":"checkout-country-field.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEvE,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,qBAAqB,EAAE,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EACb,MAAM,EACN,WAAW,GACZ,EAAE,yBAAyB,+BAuB3B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.js

@@ -26,6 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_field = require("../../../ui/field.js");
 var import_select = require("../../../ui/select.js");
 var import_checkout_field_feedback = require("./checkout-field-feedback.js");
+var import_checkout_id_context = require("./checkout-id-context.js");
 function CheckoutCountryField({
   labels,
   countries,
@@ -34,13 +35,15 @@ function CheckoutCountryField({
   errors,
   description
 }) {
+  const checkoutId = (0, import_checkout_id_context.useCheckoutIds)();
+  const countryId = checkoutId("checkout-country");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.Field, { "data-invalid": !!errors?.length, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: "checkout-country", children: labels.countryLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: countryId, children: labels.countryLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select, { value, onValueChange, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { id: "checkout-country", ...(0, import_checkout_field_feedback.checkoutFieldAria)("checkout-country", errors), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: labels.countryPlaceholder }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { id: countryId, ...(0, import_checkout_field_feedback.checkoutFieldAria)(countryId, errors), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder: labels.countryPlaceholder }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectGroup, { children: countries.map((country) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { value: country.value, children: country.label }, country.value)) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_checkout_field_feedback.CheckoutFieldFeedback, { id: "checkout-country", errors, description })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_checkout_field_feedback.CheckoutFieldFeedback, { id: countryId, errors, description })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutCountryOption, CheckoutLabels } from './checkout'\n\nexport interface CheckoutCountryFieldProps {\n  labels: CheckoutLabels\n  countries: CheckoutCountryOption[]\n  value: string\n  onValueChange: (value: string) => void\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\nexport function CheckoutCountryField({\n  labels,\n  countries,\n  value,\n  onValueChange,\n  errors,\n  description,\n}: CheckoutCountryFieldProps) {\n  return (\n    <Field data-invalid={!!errors?.length}>\n      <FieldLabel htmlFor=\"checkout-country\">{labels.countryLabel}</FieldLabel>\n      <Select value={value} onValueChange={onValueChange}>\n        <SelectTrigger id=\"checkout-country\" {...checkoutFieldAria('checkout-country', errors)}>\n          <SelectValue placeholder={labels.countryPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {countries.map((country) => (\n              <SelectItem key={country.value} value={country.value}>\n                {country.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <CheckoutFieldFeedback id=\"checkout-country\" errors={errors} description={description} />\n    </Field>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCM;AAhCN,mBAAkC;AAClC,oBAOO;AACP,qCAAyD;AAalD,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,6CAAC,sBAAM,gBAAc,CAAC,CAAC,QAAQ,QAC7B;AAAA,gDAAC,2BAAW,SAAQ,oBAAoB,iBAAO,cAAa;AAAA,IAC5D,6CAAC,wBAAO,OAAc,eACpB;AAAA,kDAAC,+BAAc,IAAG,oBAAoB,OAAG,kDAAkB,oBAAoB,MAAM,GACnF,sDAAC,6BAAY,aAAa,OAAO,oBAAoB,GACvD;AAAA,MACA,4CAAC,+BACC,sDAAC,6BACE,oBAAU,IAAI,CAAC,YACd,4CAAC,4BAA+B,OAAO,QAAQ,OAC5C,kBAAQ,SADM,QAAQ,KAEzB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACA,4CAAC,wDAAsB,IAAG,oBAAmB,QAAgB,aAA0B;AAAA,KACzF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutCountryOption, CheckoutLabels } from './checkout'\n\nexport interface CheckoutCountryFieldProps {\n  labels: CheckoutLabels\n  countries: CheckoutCountryOption[]\n  value: string\n  onValueChange: (value: string) => void\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\nexport function CheckoutCountryField({\n  labels,\n  countries,\n  value,\n  onValueChange,\n  errors,\n  description,\n}: CheckoutCountryFieldProps) {\n  const checkoutId = useCheckoutIds()\n  const countryId = checkoutId('checkout-country')\n  return (\n    <Field data-invalid={!!errors?.length}>\n      <FieldLabel htmlFor={countryId}>{labels.countryLabel}</FieldLabel>\n      <Select value={value} onValueChange={onValueChange}>\n        <SelectTrigger id={countryId} {...checkoutFieldAria(countryId, errors)}>\n          <SelectValue placeholder={labels.countryPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {countries.map((country) => (\n              <SelectItem key={country.value} value={country.value}>\n                {country.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <CheckoutFieldFeedback id={countryId} errors={errors} description={description} />\n    </Field>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,mBAAkC;AAClC,oBAOO;AACP,qCAAyD;AACzD,iCAA+B;AAaxB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,iBAAa,2CAAe;AAClC,QAAM,YAAY,WAAW,kBAAkB;AAC/C,SACE,6CAAC,sBAAM,gBAAc,CAAC,CAAC,QAAQ,QAC7B;AAAA,gDAAC,2BAAW,SAAS,WAAY,iBAAO,cAAa;AAAA,IACrD,6CAAC,wBAAO,OAAc,eACpB;AAAA,kDAAC,+BAAc,IAAI,WAAY,OAAG,kDAAkB,WAAW,MAAM,GACnE,sDAAC,6BAAY,aAAa,OAAO,oBAAoB,GACvD;AAAA,MACA,4CAAC,+BACC,sDAAC,6BACE,oBAAU,IAAI,CAAC,YACd,4CAAC,4BAA+B,OAAO,QAAQ,OAC5C,kBAAQ,SADM,QAAQ,KAEzB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACA,4CAAC,wDAAsB,IAAI,WAAW,QAAgB,aAA0B;AAAA,KAClF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.mjs

@@ -10,6 +10,7 @@ import {
   SelectValue
 } from "../../../ui/select.mjs";
 import { CheckoutFieldFeedback, checkoutFieldAria } from "./checkout-field-feedback.mjs";
+import { useCheckoutIds } from "./checkout-id-context.mjs";
 function CheckoutCountryField({
   labels,
   countries,
@@ -18,13 +19,15 @@ function CheckoutCountryField({
   errors,
   description
 }) {
+  const checkoutId = useCheckoutIds();
+  const countryId = checkoutId("checkout-country");
   return /* @__PURE__ */ jsxs(Field, { "data-invalid": !!errors?.length, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-country", children: labels.countryLabel }),
+    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: countryId, children: labels.countryLabel }),
     /* @__PURE__ */ jsxs(Select, { value, onValueChange, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-country", ...checkoutFieldAria("checkout-country", errors), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: labels.countryPlaceholder }) }),
+      /* @__PURE__ */ jsx(SelectTrigger, { id: countryId, ...checkoutFieldAria(countryId, errors), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: labels.countryPlaceholder }) }),
       /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: countries.map((country) => /* @__PURE__ */ jsx(SelectItem, { value: country.value, children: country.label }, country.value)) }) })
     ] }),
-    /* @__PURE__ */ jsx(CheckoutFieldFeedback, { id: "checkout-country", errors, description })
+    /* @__PURE__ */ jsx(CheckoutFieldFeedback, { id: countryId, errors, description })
   ] });
 }
 export {

package/dist/blocks/e-commerce/checkout-forms/checkout-country-field.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutCountryOption, CheckoutLabels } from './checkout'\n\nexport interface CheckoutCountryFieldProps {\n  labels: CheckoutLabels\n  countries: CheckoutCountryOption[]\n  value: string\n  onValueChange: (value: string) => void\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\nexport function CheckoutCountryField({\n  labels,\n  countries,\n  value,\n  onValueChange,\n  errors,\n  description,\n}: CheckoutCountryFieldProps) {\n  return (\n    <Field data-invalid={!!errors?.length}>\n      <FieldLabel htmlFor=\"checkout-country\">{labels.countryLabel}</FieldLabel>\n      <Select value={value} onValueChange={onValueChange}>\n        <SelectTrigger id=\"checkout-country\" {...checkoutFieldAria('checkout-country', errors)}>\n          <SelectValue placeholder={labels.countryPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {countries.map((country) => (\n              <SelectItem key={country.value} value={country.value}>\n                {country.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <CheckoutFieldFeedback id=\"checkout-country\" errors={errors} description={description} />\n    </Field>\n  )\n}\n"],"mappings":";AAkCM,cACA,YADA;AAhCN,SAAS,OAAO,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,yBAAyB;AAalD,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,QAAQ,QAC7B;AAAA,wBAAC,cAAW,SAAQ,oBAAoB,iBAAO,cAAa;AAAA,IAC5D,qBAAC,UAAO,OAAc,eACpB;AAAA,0BAAC,iBAAc,IAAG,oBAAoB,GAAG,kBAAkB,oBAAoB,MAAM,GACnF,8BAAC,eAAY,aAAa,OAAO,oBAAoB,GACvD;AAAA,MACA,oBAAC,iBACC,8BAAC,eACE,oBAAU,IAAI,CAAC,YACd,oBAAC,cAA+B,OAAO,QAAQ,OAC5C,kBAAQ,SADM,QAAQ,KAEzB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACA,oBAAC,yBAAsB,IAAG,oBAAmB,QAAgB,aAA0B;AAAA,KACzF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-country-field.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutCountryOption, CheckoutLabels } from './checkout'\n\nexport interface CheckoutCountryFieldProps {\n  labels: CheckoutLabels\n  countries: CheckoutCountryOption[]\n  value: string\n  onValueChange: (value: string) => void\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\nexport function CheckoutCountryField({\n  labels,\n  countries,\n  value,\n  onValueChange,\n  errors,\n  description,\n}: CheckoutCountryFieldProps) {\n  const checkoutId = useCheckoutIds()\n  const countryId = checkoutId('checkout-country')\n  return (\n    <Field data-invalid={!!errors?.length}>\n      <FieldLabel htmlFor={countryId}>{labels.countryLabel}</FieldLabel>\n      <Select value={value} onValueChange={onValueChange}>\n        <SelectTrigger id={countryId} {...checkoutFieldAria(countryId, errors)}>\n          <SelectValue placeholder={labels.countryPlaceholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {countries.map((country) => (\n              <SelectItem key={country.value} value={country.value}>\n                {country.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <CheckoutFieldFeedback id={countryId} errors={errors} description={description} />\n    </Field>\n  )\n}\n"],"mappings":";AAqCM,cACA,YADA;AAnCN,SAAS,OAAO,kBAAkB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,yBAAyB;AACzD,SAAS,sBAAsB;AAaxB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,aAAa,eAAe;AAClC,QAAM,YAAY,WAAW,kBAAkB;AAC/C,SACE,qBAAC,SAAM,gBAAc,CAAC,CAAC,QAAQ,QAC7B;AAAA,wBAAC,cAAW,SAAS,WAAY,iBAAO,cAAa;AAAA,IACrD,qBAAC,UAAO,OAAc,eACpB;AAAA,0BAAC,iBAAc,IAAI,WAAY,GAAG,kBAAkB,WAAW,MAAM,GACnE,8BAAC,eAAY,aAAa,OAAO,oBAAoB,GACvD;AAAA,MACA,oBAAC,iBACC,8BAAC,eACE,oBAAU,IAAI,CAAC,YACd,oBAAC,cAA+B,OAAO,QAAQ,OAC5C,kBAAQ,SADM,QAAQ,KAEzB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACA,oBAAC,yBAAsB,IAAI,WAAW,QAAgB,aAA0B;AAAA,KAClF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export declare function CheckoutIdProvider({ prefix, children }: {
+    prefix: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useCheckoutIds(): (id: string) => string;
+//# sourceMappingURL=checkout-id-context.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-id-context.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-id-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE/F;AAED,wBAAgB,cAAc,SAEJ,MAAM,YAC/B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.js

@@ -0,0 +1,41 @@
+"use strict";
+"use client";
+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 checkout_id_context_exports = {};
+__export(checkout_id_context_exports, {
+  CheckoutIdProvider: () => CheckoutIdProvider,
+  useCheckoutIds: () => useCheckoutIds
+});
+module.exports = __toCommonJS(checkout_id_context_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const CheckoutIdContext = (0, import_react.createContext)(void 0);
+function CheckoutIdProvider({ prefix, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckoutIdContext.Provider, { value: prefix, children });
+}
+function useCheckoutIds() {
+  const prefix = (0, import_react.useContext)(CheckoutIdContext);
+  return (0, import_react.useCallback)((id) => prefix ? `${prefix}-${id}` : id, [prefix]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutIdProvider,
+  useCheckoutIds
+});
+//# sourceMappingURL=checkout-id-context.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-id-context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useCallback, useContext, type ReactNode } from 'react'\n\nconst CheckoutIdContext = createContext<string | undefined>(undefined)\n\nexport function CheckoutIdProvider({ prefix, children }: { prefix: string; children: ReactNode }) {\n  return <CheckoutIdContext.Provider value={prefix}>{children}</CheckoutIdContext.Provider>\n}\n\nexport function useCheckoutIds() {\n  const prefix = useContext(CheckoutIdContext)\n  return useCallback((id: string) => (prefix ? `${prefix}-${id}` : id), [prefix])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOS;AALT,mBAAuE;AAEvE,MAAM,wBAAoB,4BAAkC,MAAS;AAE9D,SAAS,mBAAmB,EAAE,QAAQ,SAAS,GAA4C;AAChG,SAAO,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,QAAS,UAAS;AAC9D;AAEO,SAAS,iBAAiB;AAC/B,QAAM,aAAS,yBAAW,iBAAiB;AAC3C,aAAO,0BAAY,CAAC,OAAgB,SAAS,GAAG,MAAM,IAAI,EAAE,KAAK,IAAK,CAAC,MAAM,CAAC;AAChF;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext } from "react";
+const CheckoutIdContext = createContext(void 0);
+function CheckoutIdProvider({ prefix, children }) {
+  return /* @__PURE__ */ jsx(CheckoutIdContext.Provider, { value: prefix, children });
+}
+function useCheckoutIds() {
+  const prefix = useContext(CheckoutIdContext);
+  return useCallback((id) => prefix ? `${prefix}-${id}` : id, [prefix]);
+}
+export {
+  CheckoutIdProvider,
+  useCheckoutIds
+};
+//# sourceMappingURL=checkout-id-context.mjs.map

package/dist/blocks/e-commerce/checkout-forms/checkout-id-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-id-context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useCallback, useContext, type ReactNode } from 'react'\n\nconst CheckoutIdContext = createContext<string | undefined>(undefined)\n\nexport function CheckoutIdProvider({ prefix, children }: { prefix: string; children: ReactNode }) {\n  return <CheckoutIdContext.Provider value={prefix}>{children}</CheckoutIdContext.Provider>\n}\n\nexport function useCheckoutIds() {\n  const prefix = useContext(CheckoutIdContext)\n  return useCallback((id: string) => (prefix ? `${prefix}-${id}` : id), [prefix])\n}\n"],"mappings":";AAOS;AALT,SAAS,eAAe,aAAa,kBAAkC;AAEvE,MAAM,oBAAoB,cAAkC,MAAS;AAE9D,SAAS,mBAAmB,EAAE,QAAQ,SAAS,GAA4C;AAChG,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,QAAS,UAAS;AAC9D;AAEO,SAAS,iBAAiB;AAC/B,QAAM,SAAS,WAAW,iBAAiB;AAC3C,SAAO,YAAY,CAAC,OAAgB,SAAS,GAAG,MAAM,IAAI,EAAE,KAAK,IAAK,CAAC,MAAM,CAAC;AAChF;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.d.ts

@@ -0,0 +1,24 @@
+import type { CheckoutAddressOption, CheckoutReadState } from '@thorprovider/types';
+import type { CheckoutFieldError } from './checkout-form-types';
+import type { CheckoutLabels } from './checkout';
+export interface CheckoutLocationSelectProps {
+    id: string;
+    label: string;
+    placeholder: string;
+    value: string;
+    options: CheckoutAddressOption[];
+    state?: CheckoutReadState;
+    error?: string;
+    disabled?: boolean;
+    onChange: (value: string) => void;
+    onRetry?: () => void;
+    labels: CheckoutLabels;
+    errors?: CheckoutFieldError[];
+    description?: string;
+}
+/**
+ * One country/province/city selector. The block renders the supplied options
+ * and states; it never fetches, filters, clears, or cascades them.
+ */
+export declare function CheckoutLocationSelect({ id, label, placeholder, value, options, state, error, disabled, onChange, onRetry, labels, errors, description, }: CheckoutLocationSelectProps): import("react").JSX.Element;
+//# sourceMappingURL=checkout-location-select.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-location-select.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-location-select.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,qBAAqB,EAAE,CAAA;IAChC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAO,EACP,KAAc,EACd,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,GACZ,EAAE,2BAA2B,+BAgD7B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.js

@@ -0,0 +1,75 @@
+"use strict";
+"use client";
+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 checkout_location_select_exports = {};
+__export(checkout_location_select_exports, {
+  CheckoutLocationSelect: () => CheckoutLocationSelect
+});
+module.exports = __toCommonJS(checkout_location_select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_button = require("../../../ui/button.js");
+var import_field = require("../../../ui/field.js");
+var import_select = require("../../../ui/select.js");
+var import_checkout_field_feedback = require("./checkout-field-feedback.js");
+function CheckoutLocationSelect({
+  id,
+  label,
+  placeholder,
+  value,
+  options,
+  state = "idle",
+  error,
+  disabled = false,
+  onChange,
+  onRetry,
+  labels,
+  errors,
+  description
+}) {
+  const pending = state === "pending";
+  const failed = state === "error";
+  const unavailable = state === "unavailable";
+  const noOptions = options.length === 0;
+  const isDisabled = disabled || pending || failed || unavailable || noOptions;
+  const locationErrors = error ? [{ message: error }] : [];
+  const allErrors = [...errors ?? [], ...locationErrors];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.Field, { "data-invalid": !!allErrors.length, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select, { value, onValueChange: onChange, disabled: isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectTrigger, { id, "data-checkout-location": id, ...(0, import_checkout_field_feedback.checkoutFieldAria)(id, allErrors), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, { placeholder }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectGroup, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItem, { value: option.value, children: option.label }, option.value)) }) })
+    ] }),
+    pending ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.locationLoadingLabel }) : null,
+    unavailable || !pending && !failed && noOptions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.locationUnavailableLabel }) : null,
+    failed && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetry, children: labels.retryLabel }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_checkout_field_feedback.CheckoutFieldFeedback,
+      {
+        id,
+        errors: allErrors,
+        description
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutLocationSelect
+});
+//# sourceMappingURL=checkout-location-select.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-location-select.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '../../../ui/button'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../../../ui/select'\nimport type { CheckoutAddressOption, CheckoutReadState } from '@thorprovider/types'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { CheckoutFieldError } from './checkout-form-types'\nimport type { CheckoutLabels } from './checkout'\n\nexport interface CheckoutLocationSelectProps {\n  id: string\n  label: string\n  placeholder: string\n  value: string\n  options: CheckoutAddressOption[]\n  state?: CheckoutReadState\n  error?: string\n  disabled?: boolean\n  onChange: (value: string) => void\n  onRetry?: () => void\n  labels: CheckoutLabels\n  errors?: CheckoutFieldError[]\n  description?: string\n}\n\n/**\n * One country/province/city selector. The block renders the supplied options\n * and states; it never fetches, filters, clears, or cascades them.\n */\nexport function CheckoutLocationSelect({\n  id,\n  label,\n  placeholder,\n  value,\n  options,\n  state = 'idle',\n  error,\n  disabled = false,\n  onChange,\n  onRetry,\n  labels,\n  errors,\n  description,\n}: CheckoutLocationSelectProps) {\n  const pending = state === 'pending'\n  const failed = state === 'error'\n  const unavailable = state === 'unavailable'\n  const noOptions = options.length === 0\n  const isDisabled = disabled || pending || failed || unavailable || noOptions\n  const locationErrors: CheckoutFieldError[] = error ? [{ message: error }] : []\n  const allErrors = [...(errors ?? []), ...locationErrors]\n\n  return (\n    <Field data-invalid={!!allErrors.length}>\n      <FieldLabel htmlFor={id}>{label}</FieldLabel>\n      <Select value={value} onValueChange={onChange} disabled={isDisabled}>\n        <SelectTrigger id={id} data-checkout-location={id} {...checkoutFieldAria(id, allErrors)}>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {options.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      {pending ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.locationLoadingLabel}\n        </p>\n      ) : null}\n      {unavailable || (!pending && !failed && noOptions) ? (\n        <p className=\"text-muted-foreground text-sm\" role=\"status\">\n          {labels.locationUnavailableLabel}\n        </p>\n      ) : null}\n      {failed && onRetry ? (\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetry}>\n          {labels.retryLabel}\n        </Button>\n      ) : null}\n      <CheckoutFieldFeedback\n        id={id}\n        errors={allErrors}\n        description={description}\n      />\n    </Field>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DM;AA5DN,oBAAuB;AACvB,mBAAkC;AAClC,oBAOO;AAEP,qCAAyD;AAwBlD,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,UAAU,UAAU;AAC1B,QAAM,SAAS,UAAU;AACzB,QAAM,cAAc,UAAU;AAC9B,QAAM,YAAY,QAAQ,WAAW;AACrC,QAAM,aAAa,YAAY,WAAW,UAAU,eAAe;AACnE,QAAM,iBAAuC,QAAQ,CAAC,EAAE,SAAS,MAAM,CAAC,IAAI,CAAC;AAC7E,QAAM,YAAY,CAAC,GAAI,UAAU,CAAC,GAAI,GAAG,cAAc;AAEvD,SACE,6CAAC,sBAAM,gBAAc,CAAC,CAAC,UAAU,QAC/B;AAAA,gDAAC,2BAAW,SAAS,IAAK,iBAAM;AAAA,IAChC,6CAAC,wBAAO,OAAc,eAAe,UAAU,UAAU,YACvD;AAAA,kDAAC,+BAAc,IAAQ,0BAAwB,IAAK,OAAG,kDAAkB,IAAI,SAAS,GACpF,sDAAC,6BAAY,aAA0B,GACzC;AAAA,MACA,4CAAC,+BACC,sDAAC,6BACE,kBAAQ,IAAI,CAAC,WACZ,4CAAC,4BAA8B,OAAO,OAAO,OAC1C,iBAAO,SADO,OAAO,KAExB,CACD,GACH,GACF;AAAA,OACF;AAAA,IACC,UACC,4CAAC,OAAE,WAAU,iCAAgC,MAAK,UAC/C,iBAAO,sBACV,IACE;AAAA,IACH,eAAgB,CAAC,WAAW,CAAC,UAAU,YACtC,4CAAC,OAAE,WAAU,iCAAgC,MAAK,UAC/C,iBAAO,0BACV,IACE;AAAA,IACH,UAAU,UACT,4CAAC,wBAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAAK,WAAU,SAAQ,SAAS,SAC1E,iBAAO,YACV,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-location-select.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../../ui/button.mjs";
+import { Field, FieldLabel } from "../../../ui/field.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../ui/select.mjs";
+import { CheckoutFieldFeedback, checkoutFieldAria } from "./checkout-field-feedback.mjs";
+function CheckoutLocationSelect({
+  id,
+  label,
+  placeholder,
+  value,
+  options,
+  state = "idle",
+  error,
+  disabled = false,
+  onChange,
+  onRetry,
+  labels,
+  errors,
+  description
+}) {
+  const pending = state === "pending";
+  const failed = state === "error";
+  const unavailable = state === "unavailable";
+  const noOptions = options.length === 0;
+  const isDisabled = disabled || pending || failed || unavailable || noOptions;
+  const locationErrors = error ? [{ message: error }] : [];
+  const allErrors = [...errors ?? [], ...locationErrors];
+  return /* @__PURE__ */ jsxs(Field, { "data-invalid": !!allErrors.length, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { id, "data-checkout-location": id, ...checkoutFieldAria(id, allErrors), children: /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) }) })
+    ] }),
+    pending ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.locationLoadingLabel }) : null,
+    unavailable || !pending && !failed && noOptions ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", role: "status", children: labels.locationUnavailableLabel }) : null,
+    failed && onRetry ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetry, children: labels.retryLabel }) : null,
+    /* @__PURE__ */ jsx(
+      CheckoutFieldFeedback,
+      {
+        id,
+        errors: allErrors,
+        description
+      }
+    )
+  ] });
+}
+export {
+  CheckoutLocationSelect
+};
+//# sourceMappingURL=checkout-location-select.mjs.map