@thorprovider/blocks 3.0.2 → 4.1.0

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { FieldLegend, FieldSet } from "../../../ui/field.mjs";
+import { RadioGroup, RadioGroupItem } from "../../../ui/radio-group.mjs";
+import { useCheckoutIds } from "./checkout-id-context.mjs";
+function recipientName(address) {
+  return [address.firstName, address.lastName].filter(Boolean).join(" ");
+}
+function addressLocality(address) {
+  return [address.city, address.province, address.postalCode].filter(Boolean).join(", ");
+}
+function focusEntry(id) {
+  document.getElementById(id)?.focus();
+}
+function CheckoutSavedAddresses({
+  savedAddresses,
+  selectedId,
+  state,
+  labels,
+  countryLabel,
+  onSelect,
+  onDelete
+}) {
+  const checkoutId = useCheckoutIds();
+  const [confirmingId, setConfirmingId] = useState(null);
+  const pendingDelete = useRef(null);
+  useEffect(() => {
+    const pending = pendingDelete.current;
+    if (!pending) return;
+    const stillPresent = savedAddresses.some((entry) => entry.id === pending.deletedId);
+    if (stillPresent) {
+      if (state?.error?.id === pending.deletedId) {
+        focusEntry(checkoutId(`checkout-saved-address-${pending.deletedId}`));
+        pendingDelete.current = null;
+      }
+      return;
+    }
+    if (pending.nextId) {
+      focusEntry(checkoutId(`checkout-saved-address-${pending.nextId}`));
+    } else {
+      document.getElementById(checkoutId("checkout-add-address"))?.focus();
+    }
+    pendingDelete.current = null;
+  }, [checkoutId, savedAddresses, state?.error?.id]);
+  if (savedAddresses.length === 0) return null;
+  const confirmDelete = (id) => {
+    const index = savedAddresses.findIndex((entry) => entry.id === id);
+    const next = savedAddresses[index + 1] ?? savedAddresses[index - 1];
+    pendingDelete.current = { deletedId: id, nextId: next?.id };
+    setConfirmingId(null);
+    onDelete?.(id);
+  };
+  return /* @__PURE__ */ jsxs(FieldSet, { "aria-labelledby": checkoutId("checkout-saved-addresses-heading"), children: [
+    /* @__PURE__ */ jsx(FieldLegend, { id: checkoutId("checkout-saved-addresses-heading"), children: labels.savedAddressesLabel }),
+    /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: selectedId ?? "",
+        onValueChange: (value) => value && onSelect(String(value)),
+        className: "grid grid-cols-1 gap-3",
+        children: savedAddresses.map((saved) => {
+          const inputId = checkoutId(`checkout-saved-address-${saved.id}`);
+          const pending = state?.pendingId === saved.id;
+          const error = state?.error?.id === saved.id ? state.error : void 0;
+          const confirming = confirmingId === saved.id;
+          const name = recipientName(saved.address);
+          const locality = addressLocality(saved.address);
+          const title = saved.label?.trim() || name || saved.address.address1 || labels.savedAddressesLabel;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col gap-2",
+              "data-checkout-saved-address": saved.id,
+              "aria-busy": pending || void 0,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-start sm:justify-between", children: [
+                  /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      htmlFor: inputId,
+                      className: "flex min-w-0 flex-1 flex-col gap-0.5 text-left text-sm font-medium",
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [
+                          title,
+                          saved.label && name ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: name }) : null,
+                          saved.isDefaultShipping ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: labels.defaultAddressLabel }) : null
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: saved.address.address1 }),
+                        saved.address.address2 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: saved.address.address2 }) : null,
+                        locality ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: locality }) : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm font-normal", children: countryLabel(saved.address.countryCode) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:shrink-0", children: [
+                    selectedId !== saved.id ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "outline",
+                        size: "sm",
+                        disabled: pending,
+                        "aria-label": `${labels.useAddressLabel}: ${title}`,
+                        onClick: () => onSelect(saved.id),
+                        children: labels.useAddressLabel
+                      }
+                    ) : null,
+                    onDelete ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "sm",
+                        disabled: pending,
+                        "aria-label": `${labels.deleteAddressLabel}: ${title}`,
+                        onClick: () => setConfirmingId(saved.id),
+                        children: pending ? labels.deletingAddressLabel : labels.deleteAddressLabel
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(RadioGroupItem, { value: saved.id, id: inputId, disabled: pending })
+                  ] })
+                ] }),
+                confirming ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex flex-col gap-2 rounded-md border border-destructive/40 p-3",
+                    role: "group",
+                    "aria-label": labels.deleteAddressConfirmLabel,
+                    children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.deleteAddressConfirmLabel }),
+                      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: labels.deleteAddressHintLabel }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "destructive",
+                            size: "sm",
+                            disabled: pending,
+                            onClick: () => confirmDelete(saved.id),
+                            children: pending ? labels.deletingAddressLabel : labels.deleteAddressLabel
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "outline",
+                            size: "sm",
+                            disabled: pending,
+                            onClick: () => setConfirmingId(null),
+                            children: labels.cancelAddressLabel
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) : null,
+                error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", role: "alert", children: error.message || labels.addressDeleteErrorLabel }) : null
+              ]
+            },
+            saved.id
+          );
+        })
+      }
+    )
+  ] });
+}
+export {
+  CheckoutSavedAddresses
+};
+//# sourceMappingURL=checkout-saved-addresses.mjs.map

package/dist/blocks/e-commerce/checkout-forms/checkout-saved-addresses.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-saved-addresses.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { FieldLegend, FieldSet } from '../../../ui/field'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { useCheckoutIds } from './checkout-id-context'\nimport type { CheckoutAddressValues, CheckoutSavedAddress } from '@thorprovider/types'\nimport type { CheckoutLabels, CheckoutSavedAddressState } from './checkout'\n\nexport interface CheckoutSavedAddressesProps {\n  savedAddresses: CheckoutSavedAddress[]\n  selectedId?: string\n  state?: CheckoutSavedAddressState\n  labels: CheckoutLabels\n  countryLabel: (countryCode: string) => string\n  onSelect: (id: string) => void\n  onDelete?: (id: string) => void\n}\n\nfunction recipientName(address: CheckoutAddressValues): string {\n  return [address.firstName, address.lastName].filter(Boolean).join(' ')\n}\n\nfunction addressLocality(address: CheckoutAddressValues): string {\n  return [address.city, address.province, address.postalCode].filter(Boolean).join(', ')\n}\n\nfunction focusEntry(id: string): void {\n  document.getElementById(id)?.focus()\n}\n\n/**\n * The saved-address book as selectable cards. The radio and the two actions are\n * siblings: the label contains only the address summary, so activating Use or\n * Delete never selects the address as a side effect. Delete is a two-step\n * inline confirmation; the host owns the mutation and the refreshed list, so\n * the card is never removed optimistically.\n */\nexport function CheckoutSavedAddresses({\n  savedAddresses,\n  selectedId,\n  state,\n  labels,\n  countryLabel,\n  onSelect,\n  onDelete,\n}: CheckoutSavedAddressesProps) {\n  const checkoutId = useCheckoutIds()\n  const [confirmingId, setConfirmingId] = useState<string | null>(null)\n  const pendingDelete = useRef<{ deletedId: string; nextId?: string } | null>(null)\n\n  useEffect(() => {\n    const pending = pendingDelete.current\n    if (!pending) return\n\n    const stillPresent = savedAddresses.some((entry) => entry.id === pending.deletedId)\n    if (stillPresent) {\n      if (state?.error?.id === pending.deletedId) {\n        focusEntry(checkoutId(`checkout-saved-address-${pending.deletedId}`))\n        pendingDelete.current = null\n      }\n      return\n    }\n\n    if (pending.nextId) {\n      focusEntry(checkoutId(`checkout-saved-address-${pending.nextId}`))\n    } else {\n      document.getElementById(checkoutId('checkout-add-address'))?.focus()\n    }\n    pendingDelete.current = null\n  }, [checkoutId, savedAddresses, state?.error?.id])\n\n  if (savedAddresses.length === 0) return null\n\n  const confirmDelete = (id: string) => {\n    const index = savedAddresses.findIndex((entry) => entry.id === id)\n    const next = savedAddresses[index + 1] ?? savedAddresses[index - 1]\n    pendingDelete.current = { deletedId: id, nextId: next?.id }\n    setConfirmingId(null)\n    onDelete?.(id)\n  }\n\n  return (\n    <FieldSet aria-labelledby={checkoutId('checkout-saved-addresses-heading')}>\n      <FieldLegend id={checkoutId('checkout-saved-addresses-heading')}>\n        {labels.savedAddressesLabel}\n      </FieldLegend>\n      <RadioGroup\n        value={selectedId ?? ''}\n        onValueChange={(value) => value && onSelect(String(value))}\n        className=\"grid grid-cols-1 gap-3\"\n      >\n        {savedAddresses.map((saved) => {\n          const inputId = checkoutId(`checkout-saved-address-${saved.id}`)\n          const pending = state?.pendingId === saved.id\n          const error = state?.error?.id === saved.id ? state.error : undefined\n          const confirming = confirmingId === saved.id\n          const name = recipientName(saved.address)\n          const locality = addressLocality(saved.address)\n          const title =\n            saved.label?.trim() || name || saved.address.address1 || labels.savedAddressesLabel\n\n          return (\n            <div\n              key={saved.id}\n              className=\"flex flex-col gap-2\"\n              data-checkout-saved-address={saved.id}\n              aria-busy={pending || undefined}\n            >\n              <div className=\"flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-start sm:justify-between\">\n                <label\n                  htmlFor={inputId}\n                  className=\"flex min-w-0 flex-1 flex-col gap-0.5 text-left text-sm font-medium\"\n                >\n                  <span className=\"flex flex-wrap items-center gap-2\">\n                    {title}\n                    {saved.label && name ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">{name}</span>\n                    ) : null}\n                    {saved.isDefaultShipping ? (\n                      <Badge variant=\"secondary\" className=\"text-xs\">\n                        {labels.defaultAddressLabel}\n                      </Badge>\n                    ) : null}\n                  </span>\n                  <span className=\"text-muted-foreground text-sm font-normal\">\n                    {saved.address.address1}\n                  </span>\n                  {saved.address.address2 ? (\n                    <span className=\"text-muted-foreground text-sm font-normal\">\n                      {saved.address.address2}\n                    </span>\n                  ) : null}\n                  {locality ? (\n                    <span className=\"text-muted-foreground text-sm font-normal\">{locality}</span>\n                  ) : null}\n                  <span className=\"text-muted-foreground text-sm font-normal\">\n                    {countryLabel(saved.address.countryCode)}\n                  </span>\n                </label>\n\n                <div className=\"flex flex-wrap items-center gap-2 sm:shrink-0\">\n                  {selectedId !== saved.id ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      disabled={pending}\n                      aria-label={`${labels.useAddressLabel}: ${title}`}\n                      onClick={() => onSelect(saved.id)}\n                    >\n                      {labels.useAddressLabel}\n                    </Button>\n                  ) : null}\n                  {onDelete ? (\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      disabled={pending}\n                      aria-label={`${labels.deleteAddressLabel}: ${title}`}\n                      onClick={() => setConfirmingId(saved.id)}\n                    >\n                      {pending ? labels.deletingAddressLabel : labels.deleteAddressLabel}\n                    </Button>\n                  ) : null}\n                  <RadioGroupItem value={saved.id} id={inputId} disabled={pending} />\n                </div>\n              </div>\n\n              {confirming ? (\n                <div\n                  className=\"flex flex-col gap-2 rounded-md border border-destructive/40 p-3\"\n                  role=\"group\"\n                  aria-label={labels.deleteAddressConfirmLabel}\n                >\n                  <p className=\"text-sm font-medium\">{labels.deleteAddressConfirmLabel}</p>\n                  <p className=\"text-muted-foreground text-xs\">{labels.deleteAddressHintLabel}</p>\n                  <div className=\"flex flex-wrap gap-2\">\n                    <Button\n                      type=\"button\"\n                      variant=\"destructive\"\n                      size=\"sm\"\n                      disabled={pending}\n                      onClick={() => confirmDelete(saved.id)}\n                    >\n                      {pending ? labels.deletingAddressLabel : labels.deleteAddressLabel}\n                    </Button>\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      disabled={pending}\n                      onClick={() => setConfirmingId(null)}\n                    >\n                      {labels.cancelAddressLabel}\n                    </Button>\n                  </div>\n                </div>\n              ) : null}\n\n              {error ? (\n                <p className=\"text-destructive text-sm\" role=\"alert\">\n                  {error.message || labels.addressDeleteErrorLabel}\n                </p>\n              ) : null}\n            </div>\n          )\n        })}\n      </RadioGroup>\n    </FieldSet>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.d.ts

@@ -0,0 +1,14 @@
+import type { CheckoutStepId } from './checkout';
+export interface CheckoutSectionNavProps {
+    steps: Array<{
+        id: CheckoutStepId;
+        label: string;
+    }>;
+    ariaLabel: string;
+    instanceId: string;
+}
+export declare function checkoutSectionId(instanceId: string, step: CheckoutStepId): string;
+export declare function checkoutSectionHeadingId(instanceId: string, step: CheckoutStepId): string;
+export declare function useActiveCheckoutSection(stepIds: CheckoutStepId[], instanceId: string): CheckoutStepId;
+export declare function CheckoutSectionNav({ steps, ariaLabel, instanceId }: CheckoutSectionNavProps): import("react").JSX.Element;
+//# sourceMappingURL=checkout-section-nav.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-section-nav.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-section-nav.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAEhD,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,cAAc,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACnD,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,CAElF;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,CAEzF;AAkBD,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,cAAc,EAAE,EACzB,UAAU,EAAE,MAAM,GACjB,cAAc,CA4ChB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,uBAAuB,+BA0D3F"}

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.js

@@ -0,0 +1,136 @@
+"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_section_nav_exports = {};
+__export(checkout_section_nav_exports, {
+  CheckoutSectionNav: () => CheckoutSectionNav,
+  checkoutSectionHeadingId: () => checkoutSectionHeadingId,
+  checkoutSectionId: () => checkoutSectionId,
+  useActiveCheckoutSection: () => useActiveCheckoutSection
+});
+module.exports = __toCommonJS(checkout_section_nav_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("motion/react");
+var import_utils = require("../../../lib/utils.js");
+var import_motion = require("../../../lib/motion.js");
+function checkoutSectionId(instanceId, step) {
+  return `${instanceId}-step-${step}`;
+}
+function checkoutSectionHeadingId(instanceId, step) {
+  return `${instanceId}-heading-${step}`;
+}
+function fallbackStep(steps, sections) {
+  const line = window.innerHeight * 0.25;
+  let current;
+  sections.forEach((section, index) => {
+    if (section && section.getBoundingClientRect().top <= line) {
+      current = steps[index];
+    }
+  });
+  return current ?? steps[0];
+}
+function useActiveCheckoutSection(stepIds, instanceId) {
+  const stepKey = stepIds.join("|");
+  const [activeStep, setActiveStep] = (0, import_react.useState)(stepIds[0] ?? "contact");
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") return;
+    const ids = stepKey.split("|");
+    const sections = ids.map(
+      (step) => document.getElementById(checkoutSectionId(instanceId, step))
+    );
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const intersecting = entries.filter((entry) => entry.isIntersecting);
+        if (intersecting.length > 0) {
+          const line = window.innerHeight * 0.25;
+          const activeEntry = intersecting.reduce(
+            (closest, entry) => Math.abs(entry.boundingClientRect.top - line) < Math.abs(closest.boundingClientRect.top - line) ? entry : closest
+          );
+          const step = activeEntry.target.dataset.checkoutStep;
+          if (step && ids.includes(step)) setActiveStep(step);
+          return;
+        }
+        const fallback = fallbackStep(ids, sections);
+        if (fallback) setActiveStep(fallback);
+      },
+      { rootMargin: "-20% 0px -70% 0px", threshold: 0 }
+    );
+    sections.forEach((section) => {
+      if (section) observer.observe(section);
+    });
+    return () => observer.disconnect();
+  }, [instanceId, stepKey]);
+  return activeStep;
+}
+function CheckoutSectionNav({ steps, ariaLabel, instanceId }) {
+  const activeStep = useActiveCheckoutSection(
+    steps.map((step) => step.id),
+    instanceId
+  );
+  const reduceMotion = (0, import_react2.useReducedMotion)();
+  const navigateToStep = (event, step) => {
+    event.preventDefault();
+    const heading = document.getElementById(checkoutSectionHeadingId(instanceId, step));
+    if (!heading) return;
+    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? Boolean(reduceMotion);
+    heading.scrollIntoView?.({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "start" });
+    heading.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "flex flex-wrap items-center gap-x-6 gap-y-1 border-b", children: steps.map((step, index) => {
+    const isCurrent = step.id === activeStep;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "a",
+      {
+        "data-checkout-step-nav": step.id,
+        href: `#${checkoutSectionId(instanceId, step.id)}`,
+        "aria-current": isCurrent ? "step" : void 0,
+        onClick: (event) => navigateToStep(event, step.id),
+        className: (0, import_utils.cn)(
+          "relative flex items-center gap-2 py-3 text-sm transition-colors",
+          isCurrent ? "font-medium text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "text-xs tabular-nums", children: String(index + 1).padStart(2, "0") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: step.label }),
+          isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react2.motion.span,
+            {
+              "aria-hidden": "true",
+              layoutId: reduceMotion ? void 0 : "checkout-section-indicator",
+              transition: {
+                duration: import_motion.MOTION.durationSeconds.state,
+                ease: import_motion.MOTION.easing.standard
+              },
+              className: "bg-primary absolute inset-x-0 -bottom-px h-0.5"
+            }
+          ) : null
+        ]
+      }
+    ) }, step.id);
+  }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutSectionNav,
+  checkoutSectionHeadingId,
+  checkoutSectionId,
+  useActiveCheckoutSection
+});
+//# sourceMappingURL=checkout-section-nav.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-section-nav.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { cn } from '../../../lib/utils'\nimport { MOTION } from '../../../lib/motion'\nimport type { CheckoutStepId } from './checkout'\n\nexport interface CheckoutSectionNavProps {\n  steps: Array<{ id: CheckoutStepId; label: string }>\n  ariaLabel: string\n  instanceId: string\n}\n\nexport function checkoutSectionId(instanceId: string, step: CheckoutStepId): string {\n  return `${instanceId}-step-${step}`\n}\n\nexport function checkoutSectionHeadingId(instanceId: string, step: CheckoutStepId): string {\n  return `${instanceId}-heading-${step}`\n}\n\nfunction fallbackStep(\n  steps: CheckoutStepId[],\n  sections: Array<HTMLElement | null>,\n): CheckoutStepId | undefined {\n  const line = window.innerHeight * 0.25\n  let current: CheckoutStepId | undefined\n\n  sections.forEach((section, index) => {\n    if (section && section.getBoundingClientRect().top <= line) {\n      current = steps[index]\n    }\n  })\n\n  return current ?? steps[0]\n}\n\nexport function useActiveCheckoutSection(\n  stepIds: CheckoutStepId[],\n  instanceId: string,\n): CheckoutStepId {\n  const stepKey = stepIds.join('|')\n  const [activeStep, setActiveStep] = useState<CheckoutStepId>(stepIds[0] ?? 'contact')\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') return\n\n    const ids = stepKey.split('|') as CheckoutStepId[]\n    const sections = ids.map(\n      (step) => document.getElementById(checkoutSectionId(instanceId, step)),\n    )\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const intersecting = entries.filter((entry) => entry.isIntersecting)\n\n        if (intersecting.length > 0) {\n          const line = window.innerHeight * 0.25\n          const activeEntry = intersecting.reduce((closest, entry) =>\n            Math.abs(entry.boundingClientRect.top - line) <\n            Math.abs(closest.boundingClientRect.top - line)\n              ? entry\n              : closest,\n          )\n          const step = (activeEntry.target as HTMLElement).dataset.checkoutStep as\n            | CheckoutStepId\n            | undefined\n          if (step && ids.includes(step)) setActiveStep(step)\n          return\n        }\n\n        const fallback = fallbackStep(ids, sections)\n        if (fallback) setActiveStep(fallback)\n      },\n      { rootMargin: '-20% 0px -70% 0px', threshold: 0 },\n    )\n\n    sections.forEach((section) => {\n      if (section) observer.observe(section)\n    })\n\n    return () => observer.disconnect()\n  }, [instanceId, stepKey])\n\n  return activeStep\n}\n\nexport function CheckoutSectionNav({ steps, ariaLabel, instanceId }: CheckoutSectionNavProps) {\n  const activeStep = useActiveCheckoutSection(\n    steps.map((step) => step.id),\n    instanceId,\n  )\n  const reduceMotion = useReducedMotion()\n\n  const navigateToStep = (event: React.MouseEvent<HTMLAnchorElement>, step: CheckoutStepId) => {\n    event.preventDefault()\n    const heading = document.getElementById(checkoutSectionHeadingId(instanceId, step))\n    if (!heading) return\n\n    const prefersReducedMotion =\n      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? Boolean(reduceMotion)\n    heading.scrollIntoView?.({ behavior: prefersReducedMotion ? 'auto' : 'smooth', block: 'start' })\n    heading.focus({ preventScroll: true })\n  }\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"flex flex-wrap items-center gap-x-6 gap-y-1 border-b\">\n        {steps.map((step, index) => {\n          const isCurrent = step.id === activeStep\n\n          return (\n            <li key={step.id}>\n              <a\n                data-checkout-step-nav={step.id}\n                href={`#${checkoutSectionId(instanceId, step.id)}`}\n                aria-current={isCurrent ? 'step' : undefined}\n                onClick={(event) => navigateToStep(event, step.id)}\n                className={cn(\n                  'relative flex items-center gap-2 py-3 text-sm transition-colors',\n                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',\n                )}\n              >\n                <span aria-hidden=\"true\" className=\"text-xs tabular-nums\">\n                  {String(index + 1).padStart(2, '0')}\n                </span>\n                <span>{step.label}</span>\n                {isCurrent ? (\n                  <motion.span\n                    aria-hidden=\"true\"\n                    layoutId={reduceMotion ? undefined : 'checkout-section-indicator'}\n                    transition={{\n                      duration: MOTION.durationSeconds.state,\n                      ease: MOTION.easing.standard,\n                    }}\n                    className=\"bg-primary absolute inset-x-0 -bottom-px h-0.5\"\n                  />\n                ) : null}\n              </a>\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { cn } from "../../../lib/utils.mjs";
+import { MOTION } from "../../../lib/motion.mjs";
+function checkoutSectionId(instanceId, step) {
+  return `${instanceId}-step-${step}`;
+}
+function checkoutSectionHeadingId(instanceId, step) {
+  return `${instanceId}-heading-${step}`;
+}
+function fallbackStep(steps, sections) {
+  const line = window.innerHeight * 0.25;
+  let current;
+  sections.forEach((section, index) => {
+    if (section && section.getBoundingClientRect().top <= line) {
+      current = steps[index];
+    }
+  });
+  return current ?? steps[0];
+}
+function useActiveCheckoutSection(stepIds, instanceId) {
+  const stepKey = stepIds.join("|");
+  const [activeStep, setActiveStep] = useState(stepIds[0] ?? "contact");
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") return;
+    const ids = stepKey.split("|");
+    const sections = ids.map(
+      (step) => document.getElementById(checkoutSectionId(instanceId, step))
+    );
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const intersecting = entries.filter((entry) => entry.isIntersecting);
+        if (intersecting.length > 0) {
+          const line = window.innerHeight * 0.25;
+          const activeEntry = intersecting.reduce(
+            (closest, entry) => Math.abs(entry.boundingClientRect.top - line) < Math.abs(closest.boundingClientRect.top - line) ? entry : closest
+          );
+          const step = activeEntry.target.dataset.checkoutStep;
+          if (step && ids.includes(step)) setActiveStep(step);
+          return;
+        }
+        const fallback = fallbackStep(ids, sections);
+        if (fallback) setActiveStep(fallback);
+      },
+      { rootMargin: "-20% 0px -70% 0px", threshold: 0 }
+    );
+    sections.forEach((section) => {
+      if (section) observer.observe(section);
+    });
+    return () => observer.disconnect();
+  }, [instanceId, stepKey]);
+  return activeStep;
+}
+function CheckoutSectionNav({ steps, ariaLabel, instanceId }) {
+  const activeStep = useActiveCheckoutSection(
+    steps.map((step) => step.id),
+    instanceId
+  );
+  const reduceMotion = useReducedMotion();
+  const navigateToStep = (event, step) => {
+    event.preventDefault();
+    const heading = document.getElementById(checkoutSectionHeadingId(instanceId, step));
+    if (!heading) return;
+    const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? Boolean(reduceMotion);
+    heading.scrollIntoView?.({ behavior: prefersReducedMotion ? "auto" : "smooth", block: "start" });
+    heading.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-x-6 gap-y-1 border-b", children: steps.map((step, index) => {
+    const isCurrent = step.id === activeStep;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        "data-checkout-step-nav": step.id,
+        href: `#${checkoutSectionId(instanceId, step.id)}`,
+        "aria-current": isCurrent ? "step" : void 0,
+        onClick: (event) => navigateToStep(event, step.id),
+        className: cn(
+          "relative flex items-center gap-2 py-3 text-sm transition-colors",
+          isCurrent ? "font-medium text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-xs tabular-nums", children: String(index + 1).padStart(2, "0") }),
+          /* @__PURE__ */ jsx("span", { children: step.label }),
+          isCurrent ? /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": "true",
+              layoutId: reduceMotion ? void 0 : "checkout-section-indicator",
+              transition: {
+                duration: MOTION.durationSeconds.state,
+                ease: MOTION.easing.standard
+              },
+              className: "bg-primary absolute inset-x-0 -bottom-px h-0.5"
+            }
+          ) : null
+        ]
+      }
+    ) }, step.id);
+  }) }) });
+}
+export {
+  CheckoutSectionNav,
+  checkoutSectionHeadingId,
+  checkoutSectionId,
+  useActiveCheckoutSection
+};
+//# sourceMappingURL=checkout-section-nav.mjs.map

package/dist/blocks/e-commerce/checkout-forms/checkout-section-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-section-nav.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport { motion, useReducedMotion } from 'motion/react'\nimport { cn } from '../../../lib/utils'\nimport { MOTION } from '../../../lib/motion'\nimport type { CheckoutStepId } from './checkout'\n\nexport interface CheckoutSectionNavProps {\n  steps: Array<{ id: CheckoutStepId; label: string }>\n  ariaLabel: string\n  instanceId: string\n}\n\nexport function checkoutSectionId(instanceId: string, step: CheckoutStepId): string {\n  return `${instanceId}-step-${step}`\n}\n\nexport function checkoutSectionHeadingId(instanceId: string, step: CheckoutStepId): string {\n  return `${instanceId}-heading-${step}`\n}\n\nfunction fallbackStep(\n  steps: CheckoutStepId[],\n  sections: Array<HTMLElement | null>,\n): CheckoutStepId | undefined {\n  const line = window.innerHeight * 0.25\n  let current: CheckoutStepId | undefined\n\n  sections.forEach((section, index) => {\n    if (section && section.getBoundingClientRect().top <= line) {\n      current = steps[index]\n    }\n  })\n\n  return current ?? steps[0]\n}\n\nexport function useActiveCheckoutSection(\n  stepIds: CheckoutStepId[],\n  instanceId: string,\n): CheckoutStepId {\n  const stepKey = stepIds.join('|')\n  const [activeStep, setActiveStep] = useState<CheckoutStepId>(stepIds[0] ?? 'contact')\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') return\n\n    const ids = stepKey.split('|') as CheckoutStepId[]\n    const sections = ids.map(\n      (step) => document.getElementById(checkoutSectionId(instanceId, step)),\n    )\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const intersecting = entries.filter((entry) => entry.isIntersecting)\n\n        if (intersecting.length > 0) {\n          const line = window.innerHeight * 0.25\n          const activeEntry = intersecting.reduce((closest, entry) =>\n            Math.abs(entry.boundingClientRect.top - line) <\n            Math.abs(closest.boundingClientRect.top - line)\n              ? entry\n              : closest,\n          )\n          const step = (activeEntry.target as HTMLElement).dataset.checkoutStep as\n            | CheckoutStepId\n            | undefined\n          if (step && ids.includes(step)) setActiveStep(step)\n          return\n        }\n\n        const fallback = fallbackStep(ids, sections)\n        if (fallback) setActiveStep(fallback)\n      },\n      { rootMargin: '-20% 0px -70% 0px', threshold: 0 },\n    )\n\n    sections.forEach((section) => {\n      if (section) observer.observe(section)\n    })\n\n    return () => observer.disconnect()\n  }, [instanceId, stepKey])\n\n  return activeStep\n}\n\nexport function CheckoutSectionNav({ steps, ariaLabel, instanceId }: CheckoutSectionNavProps) {\n  const activeStep = useActiveCheckoutSection(\n    steps.map((step) => step.id),\n    instanceId,\n  )\n  const reduceMotion = useReducedMotion()\n\n  const navigateToStep = (event: React.MouseEvent<HTMLAnchorElement>, step: CheckoutStepId) => {\n    event.preventDefault()\n    const heading = document.getElementById(checkoutSectionHeadingId(instanceId, step))\n    if (!heading) return\n\n    const prefersReducedMotion =\n      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? Boolean(reduceMotion)\n    heading.scrollIntoView?.({ behavior: prefersReducedMotion ? 'auto' : 'smooth', block: 'start' })\n    heading.focus({ preventScroll: true })\n  }\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol className=\"flex flex-wrap items-center gap-x-6 gap-y-1 border-b\">\n        {steps.map((step, index) => {\n          const isCurrent = step.id === activeStep\n\n          return (\n            <li key={step.id}>\n              <a\n                data-checkout-step-nav={step.id}\n                href={`#${checkoutSectionId(instanceId, step.id)}`}\n                aria-current={isCurrent ? 'step' : undefined}\n                onClick={(event) => navigateToStep(event, step.id)}\n                className={cn(\n                  'relative flex items-center gap-2 py-3 text-sm transition-colors',\n                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',\n                )}\n              >\n                <span aria-hidden=\"true\" className=\"text-xs tabular-nums\">\n                  {String(index + 1).padStart(2, '0')}\n                </span>\n                <span>{step.label}</span>\n                {isCurrent ? (\n                  <motion.span\n                    aria-hidden=\"true\"\n                    layoutId={reduceMotion ? undefined : 'checkout-section-indicator'}\n                    transition={{\n                      duration: MOTION.durationSeconds.state,\n                      ease: MOTION.easing.standard,\n                    }}\n                    className=\"bg-primary absolute inset-x-0 -bottom-px h-0.5\"\n                  />\n                ) : null}\n              </a>\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.d.ts

@@ -1,17 +1,39 @@
-import type { Money } from '@thorprovider/types';
-import type { CheckoutChangeHandler, CheckoutCountryOption, CheckoutFieldDescriptions, CheckoutValuesFieldErrors, CheckoutLabels, CheckoutShippingOption, CheckoutValues } from './checkout';
+import type { CheckoutAddressLevel, CheckoutAddressValues, CheckoutLocationOptions, CheckoutSavedAddress, CheckoutShippingGroup, Money } from '@thorprovider/types';
+import type { CheckoutAddressChangeHandler, CheckoutFieldDescriptions, CheckoutFieldErrors, CheckoutLabels, CheckoutSavedAddressState } from './checkout';
 export interface CheckoutShippingStepProps {
-    values: CheckoutValues;
-    onChange: CheckoutChangeHandler;
+    shippingAddress: CheckoutAddressValues;
+    billingAddress?: CheckoutAddressValues;
+    sameAsShipping: boolean;
+    onShippingAddressChange: CheckoutAddressChangeHandler;
+    onBillingAddressChange?: CheckoutAddressChangeHandler;
+    onSameAsShippingChange: (same: boolean) => void;
+    shippingLocations?: CheckoutLocationOptions;
+    billingLocations?: CheckoutLocationOptions;
+    onRetryLocations?: (kind: 'shipping' | 'billing', level: CheckoutAddressLevel) => void;
+    savedAddresses?: CheckoutSavedAddress[];
+    onSelectSavedAddress?: (id: string) => void;
+    onCreateSavedAddress?: (address: CheckoutAddressValues) => void;
+    onUpdateSavedAddress?: (id: string, address: CheckoutAddressValues) => void;
+    onDeleteSavedAddress?: (id: string) => void;
+    onStartNewAddress?: () => void;
+    onCancelNewAddress?: () => void;
+    savedAddressState?: CheckoutSavedAddressState;
+    shippingGroups?: CheckoutShippingGroup[];
+    shippingState?: 'idle' | 'pending' | 'error' | 'unavailable';
+    onSelectShippingOption?: (groupId: string, optionId: string) => void;
+    onRetryShipping?: () => void;
     labels: CheckoutLabels;
-    countries?: CheckoutCountryOption[];
-    shippingOptions?: CheckoutShippingOption[];
-    selectedShippingOptionId?: string;
-    onSelectShippingOption?: (id: string) => void;
     /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
     formatMoney?: (money: Money) => string;
-    fieldErrors?: CheckoutValuesFieldErrors;
+    fieldErrors?: CheckoutFieldErrors;
     fieldDescriptions?: CheckoutFieldDescriptions;
+    requireShippingPhone?: boolean;
 }
-export declare function CheckoutShippingStep({ values, onChange, labels, countries, shippingOptions, selectedShippingOptionId, onSelectShippingOption, formatMoney: formatMoneyProp, fieldErrors, fieldDescriptions, }: CheckoutShippingStepProps): import("react").JSX.Element;
+/**
+ * Shipping and billing addresses, the saved-address book, and the contextual
+ * save/update/create actions. The block is controlled: it reports intentions
+ * and renders the host's refreshed list and mutation state; it never mutates
+ * the address book itself.
+ */
+export declare function CheckoutShippingStep({ shippingAddress, billingAddress, sameAsShipping, onShippingAddressChange, onBillingAddressChange, onSameAsShippingChange, shippingLocations, billingLocations, onRetryLocations, savedAddresses, onSelectSavedAddress, onCreateSavedAddress, onUpdateSavedAddress, onDeleteSavedAddress, onStartNewAddress, onCancelNewAddress, savedAddressState, shippingGroups, shippingState, onSelectShippingOption, onRetryShipping, labels, formatMoney: formatMoneyProp, fieldErrors, fieldDescriptions, requireShippingPhone, }: CheckoutShippingStepProps): import("react").JSX.Element;
 //# sourceMappingURL=checkout-shipping-step.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-shipping-step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-shipping-step.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-shipping-step.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAGhD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,yBAAyB,EACzB,yBAAyB,EACzB,cAAc,EACd,sBAAsB,EACtB,cAAc,EACf,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACnC,eAAe,CAAC,EAAE,sBAAsB,EAAE,CAAA;IAC1C,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,sBAAsB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;CAC9C;AAED,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,EACT,eAAe,EACf,wBAAwB,EACxB,sBAAsB,EACtB,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,iBAAiB,GAClB,EAAE,yBAAyB,+BAuI3B"}
+{"version":3,"file":"checkout-shipping-step.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-shipping-step.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACN,MAAM,qBAAqB,CAAA;AAM5B,OAAO,KAAK,EACV,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EAC1B,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,yBAAyB;IACxC,eAAe,EAAE,qBAAqB,CAAA;IACtC,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,cAAc,EAAE,OAAO,CAAA;IACvB,uBAAuB,EAAE,4BAA4B,CAAA;IACrD,sBAAsB,CAAC,EAAE,4BAA4B,CAAA;IACrD,sBAAsB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC/C,iBAAiB,CAAC,EAAE,uBAAuB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,uBAAuB,CAAA;IAC1C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAA;IACtF,cAAc,CAAC,EAAE,oBAAoB,EAAE,CAAA;IACvC,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAC/D,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAC3E,oBAAoB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;IAC7C,cAAc,CAAC,EAAE,qBAAqB,EAAE,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;IAC7C,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,cAAc,EACd,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,aAAsB,EACtB,sBAAsB,EACtB,eAAe,EACf,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,WAAW,EACX,iBAAiB,EACjB,oBAA4B,GAC7B,EAAE,yBAAyB,+BA2N3B"}