@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/buyer-section.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '../../../../ui/button'\nimport type { CheckoutCopy } from './types'\n\nconst VARIANT_OUTLINE = 'outline' as const\nconst VARIANT_GHOST = 'ghost' as const\nconst AUTOCOMPLETE_NAME = 'name'\nconst AUTOCOMPLETE_EMAIL = 'email'\nconst AUTOCOMPLETE_TEL = 'tel'\n\nexport type GuestContact = {\n  name: string\n  email: string\n  phone: string\n}\n\nexport function BuyerSection({\n  uid,\n  labels,\n  session,\n  name,\n  email,\n  phone,\n  guestConfirmed,\n  authPhoneComplete,\n  errors,\n  onFieldChange,\n  onGuestSave,\n  onGuestEdit,\n  onAuthPhoneSave,\n  onRetrySession,\n  onStartRegistration,\n}: {\n  uid: string\n  labels: CheckoutCopy\n  session: string\n  name: string\n  email: string\n  phone: string\n  guestConfirmed: boolean\n  authPhoneComplete: boolean\n  errors: Record<string, string>\n  onFieldChange: (field: 'name' | 'email' | 'phone', value: string) => void\n  onGuestSave: () => void\n  onGuestEdit: () => void\n  onAuthPhoneSave: () => void\n  onRetrySession: () => void\n  onStartRegistration?: (contact: GuestContact) => void\n}) {\n  const isGuest = session === 'guest'\n  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth\n\n  return (\n    <section aria-labelledby={`${uid}-buyer`} aria-busy={session === 'loading'}>\n      <h3\n        id={`${uid}-buyer`}\n        className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {title}\n      </h3>\n\n      {session === 'loading' ? (\n        <div className=\"mt-1\">\n          <p className=\"text-xs text-muted-foreground\">{labels.sessionLoading}</p>\n          <div className=\"mt-2 h-4 w-40 rounded bg-muted\" />\n        </div>\n      ) : session === 'error' ? (\n        <div className=\"mt-1\">\n          <p className=\"text-xs text-destructive\">{labels.sessionError}</p>\n          <Button\n            type=\"button\"\n            size=\"xs\"\n            variant={VARIANT_OUTLINE}\n            className=\"mt-1.5\"\n            onClick={onRetrySession}\n          >\n            {labels.retryAction}\n          </Button>\n        </div>\n      ) : !isGuest ? (\n        <div>\n          <p className=\"mt-1 text-sm font-medium\">{name}</p>\n          <p className=\"text-xs text-muted-foreground\">\n            {[email, authPhoneComplete ? phone : ''].filter(Boolean).join(' · ')}\n          </p>\n          {!authPhoneComplete ? (\n            <form\n              className=\"mt-2\"\n              onSubmit={(event) => {\n                event.preventDefault()\n                onAuthPhoneSave()\n              }}\n              noValidate\n            >\n              <label htmlFor={`${uid}-buyer-phone`} className=\"text-xs font-medium\">\n                {labels.contactPhone}\n              </label>\n              <div className=\"mt-1 flex flex-wrap items-start gap-2\">\n                <input\n                  id={`${uid}-buyer-phone`}\n                  type=\"tel\"\n                  autoComplete={AUTOCOMPLETE_TEL}\n                  value={phone}\n                  onChange={(event) => onFieldChange('phone', event.target.value)}\n                  aria-invalid={errors.contactPhone ? true : undefined}\n                  aria-describedby={\n                    errors.contactPhone ? `${uid}-buyer-phone-error` : undefined\n                  }\n                  className=\"h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm\"\n                />\n                <Button type=\"submit\" size=\"sm\">\n                  {labels.buyerSavePhone}\n                </Button>\n              </div>\n              <p className=\"mt-1 text-xs text-muted-foreground\">{labels.buyerPhoneHint}</p>\n              {errors.contactPhone ? (\n                <p id={`${uid}-buyer-phone-error`} className=\"mt-1 text-xs text-destructive\">\n                  {errors.contactPhone}\n                </p>\n              ) : null}\n            </form>\n          ) : null}\n        </div>\n      ) : guestConfirmed ? (\n        <div>\n          <div className=\"mt-1 flex items-start justify-between gap-2\">\n            <div className=\"min-w-0\">\n              <p className=\"text-sm font-medium\">{name}</p>\n              <p className=\"text-xs text-muted-foreground\">\n                {[email, phone].filter(Boolean).join(' · ')}\n              </p>\n            </div>\n            <Button type=\"button\" size=\"sm\" variant={VARIANT_OUTLINE} onClick={onGuestEdit}>\n              {labels.contactEdit}\n            </Button>\n          </div>\n          {onStartRegistration ? (\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n              <p className=\"text-xs text-muted-foreground\">{labels.accountOptional}</p>\n              <Button\n                type=\"button\"\n                size=\"xs\"\n                variant={VARIANT_GHOST}\n                onClick={() => onStartRegistration({ name, email, phone })}\n              >\n                {labels.createAccount}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      ) : (\n        <form\n          className=\"mt-2 grid gap-3 sm:grid-cols-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            onGuestSave()\n          }}\n          noValidate\n        >\n          <div className=\"sm:col-span-2\">\n            <label htmlFor={`${uid}-buyer-name`} className=\"text-xs font-medium\">\n              {labels.contactName}\n            </label>\n            <input\n              id={`${uid}-buyer-name`}\n              type=\"text\"\n              autoComplete={AUTOCOMPLETE_NAME}\n              value={name}\n              onChange={(event) => onFieldChange('name', event.target.value)}\n              aria-invalid={errors.contactName ? true : undefined}\n              aria-describedby={errors.contactName ? `${uid}-buyer-name-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactName ? (\n              <p id={`${uid}-buyer-name-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactName}\n              </p>\n            ) : null}\n          </div>\n          <div>\n            <label htmlFor={`${uid}-buyer-email`} className=\"text-xs font-medium\">\n              {labels.contactEmail}\n            </label>\n            <input\n              id={`${uid}-buyer-email`}\n              type=\"email\"\n              autoComplete={AUTOCOMPLETE_EMAIL}\n              value={email}\n              onChange={(event) => onFieldChange('email', event.target.value)}\n              aria-invalid={errors.contactEmail ? true : undefined}\n              aria-describedby={errors.contactEmail ? `${uid}-buyer-email-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactEmail ? (\n              <p id={`${uid}-buyer-email-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactEmail}\n              </p>\n            ) : null}\n          </div>\n          <div>\n            <label htmlFor={`${uid}-buyer-phone`} className=\"text-xs font-medium\">\n              {labels.contactPhone}\n            </label>\n            <input\n              id={`${uid}-buyer-phone`}\n              type=\"tel\"\n              autoComplete={AUTOCOMPLETE_TEL}\n              value={phone}\n              onChange={(event) => onFieldChange('phone', event.target.value)}\n              aria-invalid={errors.contactPhone ? true : undefined}\n              aria-describedby={errors.contactPhone ? `${uid}-buyer-phone-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactPhone ? (\n              <p id={`${uid}-buyer-phone-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactPhone}\n              </p>\n            ) : null}\n          </div>\n          <div className=\"sm:col-span-2\">\n            <Button type=\"submit\" size=\"sm\">\n              {labels.buyerContinue}\n            </Button>\n          </div>\n        </form>\n      )}\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.mjs

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../../../ui/button.mjs";
+const VARIANT_OUTLINE = "outline";
+const VARIANT_GHOST = "ghost";
+const AUTOCOMPLETE_NAME = "name";
+const AUTOCOMPLETE_EMAIL = "email";
+const AUTOCOMPLETE_TEL = "tel";
+function BuyerSection({
+  uid,
+  labels,
+  session,
+  name,
+  email,
+  phone,
+  guestConfirmed,
+  authPhoneComplete,
+  errors,
+  onFieldChange,
+  onGuestSave,
+  onGuestEdit,
+  onAuthPhoneSave,
+  onRetrySession,
+  onStartRegistration
+}) {
+  const isGuest = session === "guest";
+  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth;
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": `${uid}-buyer`, "aria-busy": session === "loading", children: [
+    /* @__PURE__ */ jsx(
+      "h3",
+      {
+        id: `${uid}-buyer`,
+        className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+        children: title
+      }
+    ),
+    session === "loading" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.sessionLoading }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 h-4 w-40 rounded bg-muted" })
+    ] }) : session === "error" ? /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.sessionError }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "xs",
+          variant: VARIANT_OUTLINE,
+          className: "mt-1.5",
+          onClick: onRetrySession,
+          children: labels.retryAction
+        }
+      )
+    ] }) : !isGuest ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: name }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, authPhoneComplete ? phone : ""].filter(Boolean).join(" \xB7 ") }),
+      !authPhoneComplete ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "mt-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            onAuthPhoneSave();
+          },
+          noValidate: true,
+          children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-start gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: `${uid}-buyer-phone`,
+                  type: "tel",
+                  autoComplete: AUTOCOMPLETE_TEL,
+                  value: phone,
+                  onChange: (event) => onFieldChange("phone", event.target.value),
+                  "aria-invalid": errors.contactPhone ? true : void 0,
+                  "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                  className: "h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerSavePhone })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.buyerPhoneHint }),
+            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ]
+        }
+      ) : null
+    ] }) : guestConfirmed ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [email, phone].filter(Boolean).join(" \xB7 ") })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: VARIANT_OUTLINE, onClick: onGuestEdit, children: labels.contactEdit })
+      ] }),
+      onStartRegistration ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.accountOptional }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "xs",
+            variant: VARIANT_GHOST,
+            onClick: () => onStartRegistration({ name, email, phone }),
+            children: labels.createAccount
+          }
+        )
+      ] }) : null
+    ] }) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mt-2 grid gap-3 sm:grid-cols-2",
+        onSubmit: (event) => {
+          event.preventDefault();
+          onGuestSave();
+        },
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-name`, className: "text-xs font-medium", children: labels.contactName }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-name`,
+                type: "text",
+                autoComplete: AUTOCOMPLETE_NAME,
+                value: name,
+                onChange: (event) => onFieldChange("name", event.target.value),
+                "aria-invalid": errors.contactName ? true : void 0,
+                "aria-describedby": errors.contactName ? `${uid}-buyer-name-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactName ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-name-error`, className: "mt-1 text-xs text-destructive", children: errors.contactName }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-email`, className: "text-xs font-medium", children: labels.contactEmail }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-email`,
+                type: "email",
+                autoComplete: AUTOCOMPLETE_EMAIL,
+                value: email,
+                onChange: (event) => onFieldChange("email", event.target.value),
+                "aria-invalid": errors.contactEmail ? true : void 0,
+                "aria-describedby": errors.contactEmail ? `${uid}-buyer-email-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactEmail ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-email-error`, className: "mt-1 text-xs text-destructive", children: errors.contactEmail }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-buyer-phone`, className: "text-xs font-medium", children: labels.contactPhone }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${uid}-buyer-phone`,
+                type: "tel",
+                autoComplete: AUTOCOMPLETE_TEL,
+                value: phone,
+                onChange: (event) => onFieldChange("phone", event.target.value),
+                "aria-invalid": errors.contactPhone ? true : void 0,
+                "aria-describedby": errors.contactPhone ? `${uid}-buyer-phone-error` : void 0,
+                className: "mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm"
+              }
+            ),
+            errors.contactPhone ? /* @__PURE__ */ jsx("p", { id: `${uid}-buyer-phone-error`, className: "mt-1 text-xs text-destructive", children: errors.contactPhone }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.buyerContinue }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  BuyerSection
+};
+//# sourceMappingURL=buyer-section.mjs.map

package/dist/blocks/designs/checkout-commerce-v1/view/buyer-section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/buyer-section.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '../../../../ui/button'\nimport type { CheckoutCopy } from './types'\n\nconst VARIANT_OUTLINE = 'outline' as const\nconst VARIANT_GHOST = 'ghost' as const\nconst AUTOCOMPLETE_NAME = 'name'\nconst AUTOCOMPLETE_EMAIL = 'email'\nconst AUTOCOMPLETE_TEL = 'tel'\n\nexport type GuestContact = {\n  name: string\n  email: string\n  phone: string\n}\n\nexport function BuyerSection({\n  uid,\n  labels,\n  session,\n  name,\n  email,\n  phone,\n  guestConfirmed,\n  authPhoneComplete,\n  errors,\n  onFieldChange,\n  onGuestSave,\n  onGuestEdit,\n  onAuthPhoneSave,\n  onRetrySession,\n  onStartRegistration,\n}: {\n  uid: string\n  labels: CheckoutCopy\n  session: string\n  name: string\n  email: string\n  phone: string\n  guestConfirmed: boolean\n  authPhoneComplete: boolean\n  errors: Record<string, string>\n  onFieldChange: (field: 'name' | 'email' | 'phone', value: string) => void\n  onGuestSave: () => void\n  onGuestEdit: () => void\n  onAuthPhoneSave: () => void\n  onRetrySession: () => void\n  onStartRegistration?: (contact: GuestContact) => void\n}) {\n  const isGuest = session === 'guest'\n  const title = isGuest ? labels.buyerTitleGuest : labels.buyerTitleAuth\n\n  return (\n    <section aria-labelledby={`${uid}-buyer`} aria-busy={session === 'loading'}>\n      <h3\n        id={`${uid}-buyer`}\n        className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\"\n      >\n        {title}\n      </h3>\n\n      {session === 'loading' ? (\n        <div className=\"mt-1\">\n          <p className=\"text-xs text-muted-foreground\">{labels.sessionLoading}</p>\n          <div className=\"mt-2 h-4 w-40 rounded bg-muted\" />\n        </div>\n      ) : session === 'error' ? (\n        <div className=\"mt-1\">\n          <p className=\"text-xs text-destructive\">{labels.sessionError}</p>\n          <Button\n            type=\"button\"\n            size=\"xs\"\n            variant={VARIANT_OUTLINE}\n            className=\"mt-1.5\"\n            onClick={onRetrySession}\n          >\n            {labels.retryAction}\n          </Button>\n        </div>\n      ) : !isGuest ? (\n        <div>\n          <p className=\"mt-1 text-sm font-medium\">{name}</p>\n          <p className=\"text-xs text-muted-foreground\">\n            {[email, authPhoneComplete ? phone : ''].filter(Boolean).join(' · ')}\n          </p>\n          {!authPhoneComplete ? (\n            <form\n              className=\"mt-2\"\n              onSubmit={(event) => {\n                event.preventDefault()\n                onAuthPhoneSave()\n              }}\n              noValidate\n            >\n              <label htmlFor={`${uid}-buyer-phone`} className=\"text-xs font-medium\">\n                {labels.contactPhone}\n              </label>\n              <div className=\"mt-1 flex flex-wrap items-start gap-2\">\n                <input\n                  id={`${uid}-buyer-phone`}\n                  type=\"tel\"\n                  autoComplete={AUTOCOMPLETE_TEL}\n                  value={phone}\n                  onChange={(event) => onFieldChange('phone', event.target.value)}\n                  aria-invalid={errors.contactPhone ? true : undefined}\n                  aria-describedby={\n                    errors.contactPhone ? `${uid}-buyer-phone-error` : undefined\n                  }\n                  className=\"h-10 min-w-0 flex-1 rounded-md border border-input bg-background px-3 text-sm\"\n                />\n                <Button type=\"submit\" size=\"sm\">\n                  {labels.buyerSavePhone}\n                </Button>\n              </div>\n              <p className=\"mt-1 text-xs text-muted-foreground\">{labels.buyerPhoneHint}</p>\n              {errors.contactPhone ? (\n                <p id={`${uid}-buyer-phone-error`} className=\"mt-1 text-xs text-destructive\">\n                  {errors.contactPhone}\n                </p>\n              ) : null}\n            </form>\n          ) : null}\n        </div>\n      ) : guestConfirmed ? (\n        <div>\n          <div className=\"mt-1 flex items-start justify-between gap-2\">\n            <div className=\"min-w-0\">\n              <p className=\"text-sm font-medium\">{name}</p>\n              <p className=\"text-xs text-muted-foreground\">\n                {[email, phone].filter(Boolean).join(' · ')}\n              </p>\n            </div>\n            <Button type=\"button\" size=\"sm\" variant={VARIANT_OUTLINE} onClick={onGuestEdit}>\n              {labels.contactEdit}\n            </Button>\n          </div>\n          {onStartRegistration ? (\n            <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n              <p className=\"text-xs text-muted-foreground\">{labels.accountOptional}</p>\n              <Button\n                type=\"button\"\n                size=\"xs\"\n                variant={VARIANT_GHOST}\n                onClick={() => onStartRegistration({ name, email, phone })}\n              >\n                {labels.createAccount}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      ) : (\n        <form\n          className=\"mt-2 grid gap-3 sm:grid-cols-2\"\n          onSubmit={(event) => {\n            event.preventDefault()\n            onGuestSave()\n          }}\n          noValidate\n        >\n          <div className=\"sm:col-span-2\">\n            <label htmlFor={`${uid}-buyer-name`} className=\"text-xs font-medium\">\n              {labels.contactName}\n            </label>\n            <input\n              id={`${uid}-buyer-name`}\n              type=\"text\"\n              autoComplete={AUTOCOMPLETE_NAME}\n              value={name}\n              onChange={(event) => onFieldChange('name', event.target.value)}\n              aria-invalid={errors.contactName ? true : undefined}\n              aria-describedby={errors.contactName ? `${uid}-buyer-name-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactName ? (\n              <p id={`${uid}-buyer-name-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactName}\n              </p>\n            ) : null}\n          </div>\n          <div>\n            <label htmlFor={`${uid}-buyer-email`} className=\"text-xs font-medium\">\n              {labels.contactEmail}\n            </label>\n            <input\n              id={`${uid}-buyer-email`}\n              type=\"email\"\n              autoComplete={AUTOCOMPLETE_EMAIL}\n              value={email}\n              onChange={(event) => onFieldChange('email', event.target.value)}\n              aria-invalid={errors.contactEmail ? true : undefined}\n              aria-describedby={errors.contactEmail ? `${uid}-buyer-email-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactEmail ? (\n              <p id={`${uid}-buyer-email-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactEmail}\n              </p>\n            ) : null}\n          </div>\n          <div>\n            <label htmlFor={`${uid}-buyer-phone`} className=\"text-xs font-medium\">\n              {labels.contactPhone}\n            </label>\n            <input\n              id={`${uid}-buyer-phone`}\n              type=\"tel\"\n              autoComplete={AUTOCOMPLETE_TEL}\n              value={phone}\n              onChange={(event) => onFieldChange('phone', event.target.value)}\n              aria-invalid={errors.contactPhone ? true : undefined}\n              aria-describedby={errors.contactPhone ? `${uid}-buyer-phone-error` : undefined}\n              className=\"mt-1 h-10 w-full rounded-md border border-input bg-background px-3 text-sm\"\n            />\n            {errors.contactPhone ? (\n              <p id={`${uid}-buyer-phone-error`} className=\"mt-1 text-xs text-destructive\">\n                {errors.contactPhone}\n              </p>\n            ) : null}\n          </div>\n          <div className=\"sm:col-span-2\">\n            <Button type=\"submit\" size=\"sm\">\n              {labels.buyerContinue}\n            </Button>\n          </div>\n        </form>\n      )}\n    </section>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/checkout-commerce-v1/view/checkout-view.d.ts

@@ -0,0 +1,6 @@
+import type { CheckoutViewActions, CheckoutViewModel } from './types';
+export declare function CheckoutView({ model, actions, }: {
+    model: CheckoutViewModel;
+    actions: CheckoutViewActions;
+}): import("react").JSX.Element;
+//# sourceMappingURL=checkout-view.d.ts.map

package/dist/blocks/designs/checkout-commerce-v1/view/checkout-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-view.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/checkout-commerce-v1/view/checkout-view.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAMV,mBAAmB,EACnB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAmCjB,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,mBAAmB,CAAC;CAC9B,+BAgoDA"}