@zappie/theme-base 0.1.1 → 0.1.2

package/dist/cart/cart-sheet.js

@@ -0,0 +1,35 @@
+// src/cart/cart-sheet.tsx
+import { Overlay, useOverlay } from "@zappie/foundations";
+import { useThemeClass } from "./theme-class.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CartSheet({
+  id,
+  title,
+  trigger,
+  children
+}) {
+  const rootClass = useThemeClass("z-base-cart z-base-editor");
+  const overlay = useOverlay("cart_sheet", id);
+  return /* @__PURE__ */ jsxs(
+    Overlay.Root,
+    {
+      param: "cart_sheet",
+      id,
+      presentation: { base: "sheet", lg: "dialog" },
+      children: [
+        /* @__PURE__ */ jsx(Overlay.Trigger, { className: "z-base-button-secondary", children: trigger }),
+        /* @__PURE__ */ jsxs(Overlay.Content, { "data-zappie-theme": "base", className: rootClass, children: [
+          /* @__PURE__ */ jsxs("header", { className: "z-base-cart-header", children: [
+            /* @__PURE__ */ jsx(Overlay.Title, { children: title }),
+            /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button-secondary", children: "Cancel" })
+          ] }),
+          overlay.isOpen && /* @__PURE__ */ jsx("div", { className: "z-base-cart-body", children })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CartSheet
+};
+//# sourceMappingURL=cart-sheet.js.map

package/dist/cart/cart-sheet.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/cart-sheet.tsx"],
+  "sourcesContent": ["import { Overlay, useOverlay } from \"@zappie/foundations\";\nimport type { ReactNode } from \"react\";\nimport { useThemeClass } from \"./theme-class\";\nexport function CartSheet({\n  id,\n  title,\n  trigger,\n  children,\n}: {\n  id: string;\n  title: string;\n  trigger: string;\n  children: ReactNode;\n}) {\n  const rootClass = useThemeClass(\"z-base-cart z-base-editor\");\n  const overlay = useOverlay(\"cart_sheet\", id);\n  return (\n    <Overlay.Root\n      param=\"cart_sheet\"\n      id={id}\n      presentation={{ base: \"sheet\", lg: \"dialog\" }}\n    >\n      <Overlay.Trigger className=\"z-base-button-secondary\">\n        {trigger}\n      </Overlay.Trigger>\n      <Overlay.Content data-zappie-theme=\"base\" className={rootClass}>\n        <header className=\"z-base-cart-header\">\n          <Overlay.Title>{title}</Overlay.Title>\n          <Overlay.Close className=\"z-base-button-secondary\">\n            Cancel\n          </Overlay.Close>\n        </header>\n        {overlay.isOpen && <div className=\"z-base-cart-body\">{children}</div>}\n      </Overlay.Content>\n    </Overlay.Root>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,kBAAkB;AAEpC,SAAS,qBAAqB;AAoBxB,cAIE,YAJF;AAnBC,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY,cAAc,2BAA2B;AAC3D,QAAM,UAAU,WAAW,cAAc,EAAE;AAC3C,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,cAAc,EAAE,MAAM,SAAS,IAAI,SAAS;AAAA,MAE5C;AAAA,4BAAC,QAAQ,SAAR,EAAgB,WAAU,2BACxB,mBACH;AAAA,QACA,qBAAC,QAAQ,SAAR,EAAgB,qBAAkB,QAAO,WAAW,WACnD;AAAA,+BAAC,YAAO,WAAU,sBAChB;AAAA,gCAAC,QAAQ,OAAR,EAAe,iBAAM;AAAA,YACtB,oBAAC,QAAQ,OAAR,EAAc,WAAU,2BAA0B,oBAEnD;AAAA,aACF;AAAA,UACC,QAAQ,UAAU,oBAAC,SAAI,WAAU,oBAAoB,UAAS;AAAA,WACjE;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/cart/checkout-cta.js

@@ -0,0 +1,81 @@
+// src/cart/checkout-cta.tsx
+import { isContactPhoneValid } from "@zappie/sdk/checkout";
+import { useCart } from "@zappie/sdk/react";
+import { useState } from "react";
+import { useCheckoutHandoff } from "../checkout.js";
+import { useBaseHostBridge } from "../host-bridge.js";
+import { checkoutButtonState } from "./checkout-state.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CheckoutCta({
+  totalsStatus,
+  contactPhone
+}) {
+  const cart = useCart();
+  const bridge = useBaseHostBridge();
+  const handoff = useCheckoutHandoff();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const showContactPhone = Boolean(
+    contactPhone && handoff.contactPhone && handoff.customer
+  );
+  const buttonInput = {
+    busy,
+    cartState: cart.state,
+    totalsStatus,
+    fulfilment: cart.fulfilment,
+    customer: handoff.customer,
+    contactPhoneValid: !showContactPhone || isContactPhoneValid(contactPhone?.value ?? "")
+  };
+  if (bridge.deliveryDistance) {
+    buttonInput.deliveryDistance = bridge.deliveryDistance;
+  }
+  const button = checkoutButtonState(buttonInput);
+  const checkout = async () => {
+    if (!button.enabled) {
+      return;
+    }
+    if (button.status === "phone") {
+      contactPhone?.touch();
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      if (!handoff.customer) {
+        await handoff.signIn();
+      } else {
+        const payload = cart.actions.toCheckoutPayload();
+        if (showContactPhone && contactPhone) {
+          await handoff.pay(payload, { contactPhone: contactPhone.value });
+        } else {
+          await handoff.pay(payload);
+        }
+      }
+    } catch (error2) {
+      setError(
+        error2 instanceof Error ? error2.message : "Unable to continue to checkout"
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "z-base-checkout", children: [
+    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "z-base-button",
+        disabled: !button.enabled,
+        onClick: () => {
+          void checkout();
+        },
+        children: button.label
+      }
+    )
+  ] });
+}
+export {
+  CheckoutCta
+};
+//# sourceMappingURL=checkout-cta.js.map

package/dist/cart/checkout-cta.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/checkout-cta.tsx"],
+  "sourcesContent": ["import type { TotalsState } from \"@zappie/foundations\";\nimport { isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useState } from \"react\";\nimport { useCheckoutHandoff } from \"../checkout\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nimport { checkoutButtonState } from \"./checkout-state\";\nimport type { ContactPhoneState } from \"./customer-details\";\nexport function CheckoutCta({\n  totalsStatus,\n  contactPhone,\n}: {\n  totalsStatus: TotalsState[\"status\"];\n  contactPhone?: ContactPhoneState;\n}) {\n  const cart = useCart();\n  const bridge = useBaseHostBridge();\n  const handoff = useCheckoutHandoff();\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const showContactPhone = Boolean(\n    contactPhone && handoff.contactPhone && handoff.customer,\n  );\n  const buttonInput: Parameters<typeof checkoutButtonState>[0] = {\n    busy,\n    cartState: cart.state,\n    totalsStatus,\n    fulfilment: cart.fulfilment,\n    customer: handoff.customer,\n    contactPhoneValid:\n      !showContactPhone || isContactPhoneValid(contactPhone?.value ?? \"\"),\n  };\n  if (bridge.deliveryDistance) {\n    buttonInput.deliveryDistance = bridge.deliveryDistance;\n  }\n  const button = checkoutButtonState(buttonInput);\n  const checkout = async () => {\n    if (!button.enabled) {\n      return;\n    }\n    if (button.status === \"phone\") {\n      contactPhone?.touch();\n      return;\n    }\n    setBusy(true);\n    setError(null);\n    try {\n      if (!handoff.customer) {\n        await handoff.signIn();\n      } else {\n        const payload = cart.actions.toCheckoutPayload();\n        if (showContactPhone && contactPhone) {\n          await handoff.pay(payload, { contactPhone: contactPhone.value });\n        } else {\n          await handoff.pay(payload);\n        }\n      }\n    } catch (error) {\n      setError(\n        error instanceof Error\n          ? error.message\n          : \"Unable to continue to checkout\",\n      );\n    } finally {\n      setBusy(false);\n    }\n  };\n  return (\n    <div className=\"z-base-checkout\">\n      {error && <p role=\"alert\">{error}</p>}\n      <button\n        type=\"button\"\n        className=\"z-base-button\"\n        disabled={!button.enabled}\n        onClick={() => {\n          void checkout();\n        }}\n      >\n        {button.label}\n      </button>\n    </div>\n  );\n}\n"],
+  "mappings": ";AACA,SAAS,2BAA2B;AACpC,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AA8DhC,SACY,KADZ;AA5DG,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,kBAAkB;AACjC,QAAM,UAAU,mBAAmB;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,mBAAmB;AAAA,IACvB,gBAAgB,QAAQ,gBAAgB,QAAQ;AAAA,EAClD;AACA,QAAM,cAAyD;AAAA,IAC7D;AAAA,IACA,WAAW,KAAK;AAAA,IAChB;AAAA,IACA,YAAY,KAAK;AAAA,IACjB,UAAU,QAAQ;AAAA,IAClB,mBACE,CAAC,oBAAoB,oBAAoB,cAAc,SAAS,EAAE;AAAA,EACtE;AACA,MAAI,OAAO,kBAAkB;AAC3B,gBAAY,mBAAmB,OAAO;AAAA,EACxC;AACA,QAAM,SAAS,oBAAoB,WAAW;AAC9C,QAAM,WAAW,YAAY;AAC3B,QAAI,CAAC,OAAO,SAAS;AACnB;AAAA,IACF;AACA,QAAI,OAAO,WAAW,SAAS;AAC7B,oBAAc,MAAM;AACpB;AAAA,IACF;AACA,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,UAAI,CAAC,QAAQ,UAAU;AACrB,cAAM,QAAQ,OAAO;AAAA,MACvB,OAAO;AACL,cAAM,UAAU,KAAK,QAAQ,kBAAkB;AAC/C,YAAI,oBAAoB,cAAc;AACpC,gBAAM,QAAQ,IAAI,SAAS,EAAE,cAAc,aAAa,MAAM,CAAC;AAAA,QACjE,OAAO;AACL,gBAAM,QAAQ,IAAI,OAAO;AAAA,QAC3B;AAAA,MACF;AAAA,IACF,SAASA,QAAO;AACd;AAAA,QACEA,kBAAiB,QACbA,OAAM,UACN;AAAA,MACN;AAAA,IACF,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AACA,SACE,qBAAC,SAAI,WAAU,mBACZ;AAAA,aAAS,oBAAC,OAAE,MAAK,SAAS,iBAAM;AAAA,IACjC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,UAAU,CAAC,OAAO;AAAA,QAClB,SAAS,MAAM;AACb,eAAK,SAAS;AAAA,QAChB;AAAA,QAEC,iBAAO;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;",
+  "names": ["error"]
+}

package/dist/cart/checkout-state.js

@@ -0,0 +1,74 @@
+// src/cart/checkout-state.ts
+import {
+  payReadiness
+} from "@zappie/sdk/checkout";
+var labels = {
+  pay: "Continue to payment",
+  sign_in: "Sign in to continue",
+  busy: "Please wait\u2026",
+  quoting: "Updating total\u2026",
+  retry: "Update totals to continue",
+  address: "Add a delivery address",
+  choose_area: "Choose a delivery area",
+  fix_issues: "Review your cart",
+  too_far: "Too far for delivery",
+  phone: "Check your phone number"
+};
+function toPayReadinessQuoteState(cartState, totalsStatus) {
+  if (cartState.status === "quoting") {
+    return { status: "loading" };
+  }
+  if (totalsStatus === "stale" || totalsStatus === "offline") {
+    return { status: "error" };
+  }
+  if (cartState.status === "quoted") {
+    return { status: "ready", quote: cartState.quote };
+  }
+  if (cartState.status === "needs_attention") {
+    if (cartState.quote) {
+      return { status: "ready", quote: cartState.quote };
+    }
+    return { status: "error" };
+  }
+  return { status: "idle" };
+}
+function checkoutButtonState({
+  busy,
+  cartState,
+  totalsStatus,
+  fulfilment,
+  customer,
+  contactPhoneValid = true,
+  deliveryDistance
+}) {
+  let status;
+  if (busy) {
+    status = "busy";
+  } else if (!customer) {
+    status = "sign_in";
+  } else if (deliveryDistance?.status === "too_far") {
+    status = "too_far";
+  } else {
+    const addressValid = fulfilment?.type !== "delivery" || Boolean(
+      fulfilment.address.line1 || fulfilment.address.placeId || fulfilment.address.coordinates
+    );
+    status = payReadiness(
+      toPayReadinessQuoteState(cartState, totalsStatus),
+      contactPhoneValid,
+      addressValid
+    );
+    if (status === "pay" && cartState.status === "needs_attention") {
+      status = "fix_issues";
+    }
+  }
+  return {
+    status,
+    label: labels[status],
+    enabled: status === "pay" || status === "sign_in" || status === "phone"
+  };
+}
+export {
+  checkoutButtonState,
+  toPayReadinessQuoteState
+};
+//# sourceMappingURL=checkout-state.js.map

package/dist/cart/checkout-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/checkout-state.ts"],
+  "sourcesContent": ["import type { TotalsState } from \"@zappie/foundations\";\nimport type { CartFulfilment, CartState } from \"@zappie/sdk\";\nimport {\n  payReadiness,\n  type PayReadiness,\n  type PayReadinessQuoteState,\n} from \"@zappie/sdk/checkout\";\n\nexport type CheckoutButtonStatus = PayReadiness | \"busy\" | \"too_far\";\n\nexport type CheckoutButtonState = {\n  status: CheckoutButtonStatus;\n  label: string;\n  enabled: boolean;\n};\n\nconst labels: Record<CheckoutButtonStatus, string> = {\n  pay: \"Continue to payment\",\n  sign_in: \"Sign in to continue\",\n  busy: \"Please wait\u2026\",\n  quoting: \"Updating total\u2026\",\n  retry: \"Update totals to continue\",\n  address: \"Add a delivery address\",\n  choose_area: \"Choose a delivery area\",\n  fix_issues: \"Review your cart\",\n  too_far: \"Too far for delivery\",\n  phone: \"Check your phone number\",\n};\n\nexport function toPayReadinessQuoteState(\n  cartState: CartState,\n  totalsStatus: TotalsState[\"status\"],\n): PayReadinessQuoteState {\n  if (cartState.status === \"quoting\") {\n    return { status: \"loading\" };\n  }\n  if (totalsStatus === \"stale\" || totalsStatus === \"offline\") {\n    return { status: \"error\" };\n  }\n  if (cartState.status === \"quoted\") {\n    return { status: \"ready\", quote: cartState.quote };\n  }\n  if (cartState.status === \"needs_attention\") {\n    if (cartState.quote) {\n      return { status: \"ready\", quote: cartState.quote };\n    }\n    return { status: \"error\" };\n  }\n  return { status: \"idle\" };\n}\n\nexport function checkoutButtonState({\n  busy,\n  cartState,\n  totalsStatus,\n  fulfilment,\n  customer,\n  contactPhoneValid = true,\n  deliveryDistance,\n}: {\n  busy: boolean;\n  cartState: CartState;\n  totalsStatus: TotalsState[\"status\"];\n  fulfilment: CartFulfilment | null;\n  customer: { name?: string } | null;\n  contactPhoneValid?: boolean;\n  deliveryDistance?: { status: \"unknown\" | \"far\" | \"too_far\" };\n}): CheckoutButtonState {\n  let status: CheckoutButtonStatus;\n  if (busy) {\n    status = \"busy\";\n  } else if (!customer) {\n    status = \"sign_in\";\n  } else if (deliveryDistance?.status === \"too_far\") {\n    status = \"too_far\";\n  } else {\n    const addressValid =\n      fulfilment?.type !== \"delivery\" ||\n      Boolean(\n        fulfilment.address.line1 ||\n        fulfilment.address.placeId ||\n        fulfilment.address.coordinates,\n      );\n    status = payReadiness(\n      toPayReadinessQuoteState(cartState, totalsStatus),\n      contactPhoneValid,\n      addressValid,\n    );\n    // Unresolved warnings (a changed price, a refused promo) still hold payment\n    // until the shopper deals with them, although the API would accept the order.\n    if (status === \"pay\" && cartState.status === \"needs_attention\") {\n      status = \"fix_issues\";\n    }\n  }\n  return {\n    status,\n    label: labels[status],\n    enabled: status === \"pay\" || status === \"sign_in\" || status === \"phone\",\n  };\n}\n"],
+  "mappings": ";AAEA;AAAA,EACE;AAAA,OAGK;AAUP,IAAM,SAA+C;AAAA,EACnD,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;AAEO,SAAS,yBACd,WACA,cACwB;AACxB,MAAI,UAAU,WAAW,WAAW;AAClC,WAAO,EAAE,QAAQ,UAAU;AAAA,EAC7B;AACA,MAAI,iBAAiB,WAAW,iBAAiB,WAAW;AAC1D,WAAO,EAAE,QAAQ,QAAQ;AAAA,EAC3B;AACA,MAAI,UAAU,WAAW,UAAU;AACjC,WAAO,EAAE,QAAQ,SAAS,OAAO,UAAU,MAAM;AAAA,EACnD;AACA,MAAI,UAAU,WAAW,mBAAmB;AAC1C,QAAI,UAAU,OAAO;AACnB,aAAO,EAAE,QAAQ,SAAS,OAAO,UAAU,MAAM;AAAA,IACnD;AACA,WAAO,EAAE,QAAQ,QAAQ;AAAA,EAC3B;AACA,SAAO,EAAE,QAAQ,OAAO;AAC1B;AAEO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AACF,GAQwB;AACtB,MAAI;AACJ,MAAI,MAAM;AACR,aAAS;AAAA,EACX,WAAW,CAAC,UAAU;AACpB,aAAS;AAAA,EACX,WAAW,kBAAkB,WAAW,WAAW;AACjD,aAAS;AAAA,EACX,OAAO;AACL,UAAM,eACJ,YAAY,SAAS,cACrB;AAAA,MACE,WAAW,QAAQ,SACnB,WAAW,QAAQ,WACnB,WAAW,QAAQ;AAAA,IACrB;AACF,aAAS;AAAA,MACP,yBAAyB,WAAW,YAAY;AAAA,MAChD;AAAA,MACA;AAAA,IACF;AAGA,QAAI,WAAW,SAAS,UAAU,WAAW,mBAAmB;AAC9D,eAAS;AAAA,IACX;AAAA,EACF;AACA,SAAO;AAAA,IACL;AAAA,IACA,OAAO,OAAO,MAAM;AAAA,IACpB,SAAS,WAAW,SAAS,WAAW,aAAa,WAAW;AAAA,EAClE;AACF;",
+  "names": []
+}

package/dist/cart/clear-cart.js

@@ -0,0 +1,44 @@
+// src/cart/clear-cart.tsx
+import { Overlay, useOverlay } from "@zappie/foundations";
+import { useCart } from "@zappie/sdk/react";
+import { useThemeClass } from "./theme-class.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ClearCart() {
+  const rootClass = useThemeClass("z-base-cart z-base-confirm");
+  const cart = useCart();
+  const confirm = useOverlay("cart_clear", "confirm");
+  return /* @__PURE__ */ jsxs(Overlay.Root, { param: "cart_clear", id: "confirm", presentation: "dialog", children: [
+    /* @__PURE__ */ jsx(Overlay.Trigger, { className: "z-base-button-secondary", children: "Clear cart" }),
+    /* @__PURE__ */ jsxs(
+      Overlay.Content,
+      {
+        "data-zappie-theme": "base",
+        role: "alertdialog",
+        className: rootClass,
+        children: [
+          /* @__PURE__ */ jsx(Overlay.Title, { children: "Clear your cart?" }),
+          /* @__PURE__ */ jsx("p", { children: "This removes every item in your cart." }),
+          /* @__PURE__ */ jsxs("div", { className: "z-base-confirm-actions", children: [
+            /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button-secondary", children: "Keep items" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "z-base-button",
+                onClick: () => {
+                  cart.actions.clear();
+                  confirm.close();
+                },
+                children: "Clear cart"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ClearCart
+};
+//# sourceMappingURL=clear-cart.js.map

package/dist/cart/clear-cart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/clear-cart.tsx"],
+  "sourcesContent": ["import { Overlay, useOverlay } from \"@zappie/foundations\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { useThemeClass } from \"./theme-class\";\n/** Clearing removes every line, so it asks first, as the legacy cart does. */\nexport function ClearCart() {\n  const rootClass = useThemeClass(\"z-base-cart z-base-confirm\");\n  const cart = useCart();\n  const confirm = useOverlay(\"cart_clear\", \"confirm\");\n  return (\n    <Overlay.Root param=\"cart_clear\" id=\"confirm\" presentation=\"dialog\">\n      <Overlay.Trigger className=\"z-base-button-secondary\">\n        Clear cart\n      </Overlay.Trigger>\n      <Overlay.Content\n        data-zappie-theme=\"base\"\n        role=\"alertdialog\"\n        className={rootClass}\n      >\n        <Overlay.Title>Clear your cart?</Overlay.Title>\n        <p>This removes every item in your cart.</p>\n        <div className=\"z-base-confirm-actions\">\n          <Overlay.Close className=\"z-base-button-secondary\">\n            Keep items\n          </Overlay.Close>\n          <button\n            type=\"button\"\n            className=\"z-base-button\"\n            onClick={() => {\n              cart.actions.clear();\n              confirm.close();\n            }}\n          >\n            Clear cart\n          </button>\n        </div>\n      </Overlay.Content>\n    </Overlay.Root>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,kBAAkB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAQxB,cAUE,YAVF;AANC,SAAS,YAAY;AAC1B,QAAM,YAAY,cAAc,4BAA4B;AAC5D,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,WAAW,cAAc,SAAS;AAClD,SACE,qBAAC,QAAQ,MAAR,EAAa,OAAM,cAAa,IAAG,WAAU,cAAa,UACzD;AAAA,wBAAC,QAAQ,SAAR,EAAgB,WAAU,2BAA0B,wBAErD;AAAA,IACA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,qBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,WAAW;AAAA,QAEX;AAAA,8BAAC,QAAQ,OAAR,EAAc,8BAAgB;AAAA,UAC/B,oBAAC,OAAE,mDAAqC;AAAA,UACxC,qBAAC,SAAI,WAAU,0BACb;AAAA,gCAAC,QAAQ,OAAR,EAAc,WAAU,2BAA0B,wBAEnD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM;AACb,uBAAK,QAAQ,MAAM;AACnB,0BAAQ,MAAM;AAAA,gBAChB;AAAA,gBACD;AAAA;AAAA,YAED;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/cart/customer-details.js

@@ -0,0 +1,70 @@
+// src/cart/customer-details.tsx
+import { isContactPhoneValid } from "@zappie/sdk/checkout";
+import { useId } from "react";
+import { useCheckoutHandoff } from "../checkout.js";
+import { useBaseHostBridge } from "../host-bridge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FIELDS = [
+  { field: "firstName", label: "First name", autoComplete: "given-name" },
+  { field: "lastName", label: "Last name", autoComplete: "family-name" },
+  { field: "email", label: "Email", autoComplete: "email" }
+];
+function CustomerDetails({
+  contactPhone
+} = {}) {
+  const { customerDetails } = useBaseHostBridge();
+  const handoff = useCheckoutHandoff();
+  const showPhone = Boolean(
+    contactPhone && handoff.contactPhone && handoff.customer
+  );
+  const inputId = useId();
+  const hintId = useId();
+  const errorId = useId();
+  const invalid = Boolean(
+    contactPhone?.touched && !isContactPhoneValid(contactPhone.value)
+  );
+  if (!customerDetails && !showPhone) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "z-base-fulfilment-panel", "aria-label": "Your details", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Your details" }),
+    customerDetails && FIELDS.filter(
+      ({ field }) => field !== "email" || customerDetails.requiresEmail
+    ).map(({ field, label, autoComplete }) => /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
+      label,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: field === "email" ? "email" : "text",
+          autoComplete,
+          required: field !== "lastName",
+          value: customerDetails.values[field],
+          onChange: (event) => customerDetails.update(field, event.target.value)
+        }
+      )
+    ] }, field)),
+    showPhone && contactPhone && /* @__PURE__ */ jsxs("div", { className: "z-base-field", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: "Contact phone (optional)" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          type: "tel",
+          inputMode: "tel",
+          autoComplete: "tel",
+          value: contactPhone.value,
+          "aria-describedby": invalid ? `${hintId} ${errorId}` : hintId,
+          "aria-invalid": invalid,
+          onBlur: contactPhone.touch,
+          onChange: (event) => contactPhone.update(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: hintId, children: handoff.customer?.phoneLast4 ? `Leave blank to use your Zappie number ending ${handoff.customer.phoneLast4}` : "Leave blank to use your Zappie number" }),
+      invalid && /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", children: "Enter a phone number with 7 to 15 digits" })
+    ] })
+  ] });
+}
+export {
+  CustomerDetails
+};
+//# sourceMappingURL=customer-details.js.map

package/dist/cart/customer-details.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/customer-details.tsx"],
+  "sourcesContent": ["import { isContactPhoneValid } from \"@zappie/sdk/checkout\";\nimport { useId } from \"react\";\nimport { useCheckoutHandoff } from \"../checkout\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nconst FIELDS = [\n  { field: \"firstName\", label: \"First name\", autoComplete: \"given-name\" },\n  { field: \"lastName\", label: \"Last name\", autoComplete: \"family-name\" },\n  { field: \"email\", label: \"Email\", autoComplete: \"email\" },\n] as const;\n\nexport type ContactPhoneState = {\n  value: string;\n  touched: boolean;\n  update(value: string): void;\n  touch(): void;\n};\n\n/** The details a business requires before payment, such as a name for the order. */\nexport function CustomerDetails({\n  contactPhone,\n}: {\n  contactPhone?: ContactPhoneState;\n} = {}) {\n  const { customerDetails } = useBaseHostBridge();\n  const handoff = useCheckoutHandoff();\n  const showPhone = Boolean(\n    contactPhone && handoff.contactPhone && handoff.customer,\n  );\n  const inputId = useId();\n  const hintId = useId();\n  const errorId = useId();\n  const invalid = Boolean(\n    contactPhone?.touched && !isContactPhoneValid(contactPhone.value),\n  );\n  if (!customerDetails && !showPhone) {\n    return null;\n  }\n  return (\n    <section className=\"z-base-fulfilment-panel\" aria-label=\"Your details\">\n      <h2>Your details</h2>\n      {customerDetails &&\n        FIELDS.filter(\n          ({ field }) => field !== \"email\" || customerDetails.requiresEmail,\n        ).map(({ field, label, autoComplete }) => (\n          <label key={field} className=\"z-base-field\">\n            {label}\n            <input\n              type={field === \"email\" ? \"email\" : \"text\"}\n              autoComplete={autoComplete}\n              required={field !== \"lastName\"}\n              value={customerDetails.values[field]}\n              onChange={(event) =>\n                customerDetails.update(field, event.target.value)\n              }\n            />\n          </label>\n        ))}\n      {showPhone && contactPhone && (\n        <div className=\"z-base-field\">\n          <label htmlFor={inputId}>Contact phone (optional)</label>\n          <input\n            id={inputId}\n            type=\"tel\"\n            inputMode=\"tel\"\n            autoComplete=\"tel\"\n            value={contactPhone.value}\n            aria-describedby={invalid ? `${hintId} ${errorId}` : hintId}\n            aria-invalid={invalid}\n            onBlur={contactPhone.touch}\n            onChange={(event) => contactPhone.update(event.target.value)}\n          />\n          <span id={hintId}>\n            {handoff.customer?.phoneLast4\n              ? `Leave blank to use your Zappie number ending ${handoff.customer.phoneLast4}`\n              : \"Leave blank to use your Zappie number\"}\n          </span>\n          {invalid && (\n            <span id={errorId} role=\"alert\">\n              Enter a phone number with 7 to 15 digits\n            </span>\n          )}\n        </div>\n      )}\n    </section>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAoC5B,cAKI,YALJ;AAnCN,IAAM,SAAS;AAAA,EACb,EAAE,OAAO,aAAa,OAAO,cAAc,cAAc,aAAa;AAAA,EACtE,EAAE,OAAO,YAAY,OAAO,aAAa,cAAc,cAAc;AAAA,EACrE,EAAE,OAAO,SAAS,OAAO,SAAS,cAAc,QAAQ;AAC1D;AAUO,SAAS,gBAAgB;AAAA,EAC9B;AACF,IAEI,CAAC,GAAG;AACN,QAAM,EAAE,gBAAgB,IAAI,kBAAkB;AAC9C,QAAM,UAAU,mBAAmB;AACnC,QAAM,YAAY;AAAA,IAChB,gBAAgB,QAAQ,gBAAgB,QAAQ;AAAA,EAClD;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU;AAAA,IACd,cAAc,WAAW,CAAC,oBAAoB,aAAa,KAAK;AAAA,EAClE;AACA,MAAI,CAAC,mBAAmB,CAAC,WAAW;AAClC,WAAO;AAAA,EACT;AACA,SACE,qBAAC,aAAQ,WAAU,2BAA0B,cAAW,gBACtD;AAAA,wBAAC,QAAG,0BAAY;AAAA,IACf,mBACC,OAAO;AAAA,MACL,CAAC,EAAE,MAAM,MAAM,UAAU,WAAW,gBAAgB;AAAA,IACtD,EAAE,IAAI,CAAC,EAAE,OAAO,OAAO,aAAa,MAClC,qBAAC,WAAkB,WAAU,gBAC1B;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,UAAU,UAAU,UAAU;AAAA,UACpC;AAAA,UACA,UAAU,UAAU;AAAA,UACpB,OAAO,gBAAgB,OAAO,KAAK;AAAA,UACnC,UAAU,CAAC,UACT,gBAAgB,OAAO,OAAO,MAAM,OAAO,KAAK;AAAA;AAAA,MAEpD;AAAA,SAVU,KAWZ,CACD;AAAA,IACF,aAAa,gBACZ,qBAAC,SAAI,WAAU,gBACb;AAAA,0BAAC,WAAM,SAAS,SAAS,sCAAwB;AAAA,MACjD;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAa;AAAA,UACb,OAAO,aAAa;AAAA,UACpB,oBAAkB,UAAU,GAAG,MAAM,IAAI,OAAO,KAAK;AAAA,UACrD,gBAAc;AAAA,UACd,QAAQ,aAAa;AAAA,UACrB,UAAU,CAAC,UAAU,aAAa,OAAO,MAAM,OAAO,KAAK;AAAA;AAAA,MAC7D;AAAA,MACA,oBAAC,UAAK,IAAI,QACP,kBAAQ,UAAU,aACf,gDAAgD,QAAQ,SAAS,UAAU,KAC3E,yCACN;AAAA,MACC,WACC,oBAAC,UAAK,IAAI,SAAS,MAAK,SAAQ,sDAEhC;AAAA,OAEJ;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/dist/cart/delivery-distance.js

@@ -0,0 +1,22 @@
+// src/cart/delivery-distance.tsx
+import { useBaseHostBridge } from "../host-bridge.js";
+import { jsx } from "react/jsx-runtime";
+function DeliveryDistance() {
+  const distance = useBaseHostBridge().deliveryDistance;
+  if (!distance?.message) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      role: distance.status === "too_far" ? "alert" : "status",
+      className: "z-base-notice",
+      "data-severity": distance.status === "too_far" ? "error" : "warning",
+      children: distance.message
+    }
+  );
+}
+export {
+  DeliveryDistance
+};
+//# sourceMappingURL=delivery-distance.js.map

package/dist/cart/delivery-distance.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/delivery-distance.tsx"],
+  "sourcesContent": ["import { useBaseHostBridge } from \"../host-bridge\";\n\nexport function DeliveryDistance() {\n  const distance = useBaseHostBridge().deliveryDistance;\n  if (!distance?.message) {\n    return null;\n  }\n  return (\n    <p\n      role={distance.status === \"too_far\" ? \"alert\" : \"status\"}\n      className=\"z-base-notice\"\n      data-severity={distance.status === \"too_far\" ? \"error\" : \"warning\"}\n    >\n      {distance.message}\n    </p>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,yBAAyB;AAQ9B;AANG,SAAS,mBAAmB;AACjC,QAAM,WAAW,kBAAkB,EAAE;AACrC,MAAI,CAAC,UAAU,SAAS;AACtB,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,SAAS,WAAW,YAAY,UAAU;AAAA,MAChD,WAAU;AAAA,MACV,iBAAe,SAAS,WAAW,YAAY,UAAU;AAAA,MAExD,mBAAS;AAAA;AAAA,EACZ;AAEJ;",
+  "names": []
+}

package/dist/cart/empty-cart.js

@@ -0,0 +1,14 @@
+// src/cart/empty-cart.tsx
+import { Cart, Overlay } from "@zappie/foundations";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EmptyCart() {
+  return /* @__PURE__ */ jsxs(Cart.Empty, { className: "z-base-cart-empty", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Your cart is empty" }),
+    /* @__PURE__ */ jsx("p", { children: "Add something from the menu to get started." }),
+    /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button", children: "Browse menu" })
+  ] });
+}
+export {
+  EmptyCart
+};
+//# sourceMappingURL=empty-cart.js.map

package/dist/cart/empty-cart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/empty-cart.tsx"],
+  "sourcesContent": ["import { Cart, Overlay } from \"@zappie/foundations\";\nexport function EmptyCart() {\n  return (\n    <Cart.Empty className=\"z-base-cart-empty\">\n      <h2>Your cart is empty</h2>\n      <p>Add something from the menu to get started.</p>\n      <Overlay.Close className=\"z-base-button\">Browse menu</Overlay.Close>\n    </Cart.Empty>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,MAAM,eAAe;AAG1B,SACE,KADF;AAFG,SAAS,YAAY;AAC1B,SACE,qBAAC,KAAK,OAAL,EAAW,WAAU,qBACpB;AAAA,wBAAC,QAAG,gCAAkB;AAAA,IACtB,oBAAC,OAAE,yDAA2C;AAAA,IAC9C,oBAAC,QAAQ,OAAR,EAAc,WAAU,iBAAgB,yBAAW;AAAA,KACtD;AAEJ;",
+  "names": []
+}

package/dist/cart/fulfilment-panel.js

@@ -0,0 +1,83 @@
+// src/cart/fulfilment-panel.tsx
+import { Branch, Fulfilment } from "@zappie/foundations";
+import { useCart, useStore } from "@zappie/sdk/react";
+import { Fragment, useState } from "react";
+import { useAddressLookup } from "../address.js";
+import { useBaseHostBridge } from "../host-bridge.js";
+import { AddressSheet } from "./address-sheet.js";
+import { RegionPicker } from "./region-picker.js";
+import { ScheduleSheet } from "./schedule-sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FulfilmentPanel() {
+  const cart = useCart();
+  const store = useStore();
+  const bridge = useBaseHostBridge();
+  const lookup = useAddressLookup();
+  const [error, setError] = useState(null);
+  const branch = store.data?.branches.find(
+    (branch2) => branch2.id === cart.branchId
+  );
+  const mode = bridge.fulfilmentMode ?? cart.fulfilment?.type ?? "delivery";
+  if (!branch) {
+    return null;
+  }
+  const scheduledFor = cart.fulfilment && "scheduledFor" in cart.fulfilment ? cart.fulfilment.scheduledFor : void 0;
+  return /* @__PURE__ */ jsxs("section", { className: "z-base-fulfilment-panel", "aria-label": "Fulfilment", children: [
+    /* @__PURE__ */ jsx("h2", { children: "Fulfilment" }),
+    /* @__PURE__ */ jsx(Fulfilment.Switch, { "aria-label": "Order fulfilment", children: ({ options }) => /* @__PURE__ */ jsx("div", { className: "z-base-line-actions", children: options.filter((option) => option !== "dine_in").map((option) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": mode === option,
+        className: "z-base-button-secondary",
+        onClick: () => {
+          setError(null);
+          try {
+            if (!bridge.setFulfilmentMode(
+              option
+            )) {
+              setError(
+                "This menu does not allow that fulfilment option."
+              );
+            }
+          } catch (failure) {
+            setError(
+              failure instanceof Error ? failure.message : "Unable to change fulfilment"
+            );
+          }
+        },
+        children: option === "pickup" ? "Pickup" : "Delivery"
+      },
+      option
+    )) }) }),
+    /* @__PURE__ */ jsx(Branch.Picker, { branches: [branch], children: ({ selected }) => /* @__PURE__ */ jsxs("p", { children: [
+      mode === "pickup" ? "Collect from" : "Ordering from",
+      " ",
+      selected?.name,
+      selected?.address ? ` \u2014 ${selected.address}` : ""
+    ] }) }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
+    mode === "delivery" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      cart.fulfilment?.type === "delivery" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: cart.fulfilment.address.line1 }),
+        lookup.Map && /* @__PURE__ */ jsx(lookup.Map, { address: cart.fulfilment.address })
+      ] }),
+      /* @__PURE__ */ jsx(AddressSheet, {}),
+      /* @__PURE__ */ jsx(RegionPicker, {})
+    ] }),
+    scheduledFor && /* @__PURE__ */ jsxs("p", { children: [
+      "Scheduled for",
+      " ",
+      new Intl.DateTimeFormat("en", {
+        dateStyle: "medium",
+        timeStyle: "short",
+        timeZone: branch.timezone ?? store.data?.timezone
+      }).format(new Date(scheduledFor))
+    ] }),
+    branch.fulfilment.scheduling && /* @__PURE__ */ jsx(ScheduleSheet, { branch })
+  ] });
+}
+export {
+  FulfilmentPanel
+};
+//# sourceMappingURL=fulfilment-panel.js.map

package/dist/cart/fulfilment-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/fulfilment-panel.tsx"],
+  "sourcesContent": ["import { Branch, Fulfilment } from \"@zappie/foundations\";\nimport { useCart, useStore } from \"@zappie/sdk/react\";\nimport { Fragment, useState } from \"react\";\nimport { useAddressLookup } from \"../address\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nimport { AddressSheet } from \"./address-sheet\";\nimport { RegionPicker } from \"./region-picker\";\nimport { ScheduleSheet } from \"./schedule-sheet\";\nexport function FulfilmentPanel() {\n  const cart = useCart();\n  const store = useStore();\n  const bridge = useBaseHostBridge();\n  const lookup = useAddressLookup();\n  const [error, setError] = useState<string | null>(null);\n  const branch = store.data?.branches.find(\n    (branch) => branch.id === cart.branchId,\n  );\n  const mode = bridge.fulfilmentMode ?? cart.fulfilment?.type ?? \"delivery\";\n  if (!branch) {\n    return null;\n  }\n  const scheduledFor =\n    cart.fulfilment && \"scheduledFor\" in cart.fulfilment\n      ? cart.fulfilment.scheduledFor\n      : undefined;\n  return (\n    <section className=\"z-base-fulfilment-panel\" aria-label=\"Fulfilment\">\n      <h2>Fulfilment</h2>\n      <Fulfilment.Switch aria-label=\"Order fulfilment\">\n        {({ options }) => (\n          <div className=\"z-base-line-actions\">\n            {options\n              .filter((option) => option !== \"dine_in\")\n              .map((option) => (\n                <button\n                  type=\"button\"\n                  key={option}\n                  aria-pressed={mode === option}\n                  className=\"z-base-button-secondary\"\n                  onClick={() => {\n                    setError(null);\n                    try {\n                      if (\n                        !bridge.setFulfilmentMode(\n                          option as \"delivery\" | \"pickup\",\n                        )\n                      ) {\n                        setError(\n                          \"This menu does not allow that fulfilment option.\",\n                        );\n                      }\n                    } catch (failure) {\n                      setError(\n                        failure instanceof Error\n                          ? failure.message\n                          : \"Unable to change fulfilment\",\n                      );\n                    }\n                  }}\n                >\n                  {option === \"pickup\" ? \"Pickup\" : \"Delivery\"}\n                </button>\n              ))}\n          </div>\n        )}\n      </Fulfilment.Switch>\n      <Branch.Picker branches={[branch]}>\n        {({ selected }) => (\n          <p>\n            {mode === \"pickup\" ? \"Collect from\" : \"Ordering from\"}{\" \"}\n            {selected?.name}\n            {selected?.address ? ` \u2014 ${selected.address}` : \"\"}\n          </p>\n        )}\n      </Branch.Picker>\n      {error && <p role=\"alert\">{error}</p>}\n      {mode === \"delivery\" && (\n        <Fragment>\n          {cart.fulfilment?.type === \"delivery\" && (\n            <Fragment>\n              <p>{cart.fulfilment.address.line1}</p>\n              {lookup.Map && <lookup.Map address={cart.fulfilment.address} />}\n            </Fragment>\n          )}\n          <AddressSheet />\n          <RegionPicker />\n        </Fragment>\n      )}\n      {scheduledFor && (\n        <p>\n          Scheduled for{\" \"}\n          {new Intl.DateTimeFormat(\"en\", {\n            dateStyle: \"medium\",\n            timeStyle: \"short\",\n            timeZone: branch.timezone ?? store.data?.timezone,\n          }).format(new Date(scheduledFor))}\n        </p>\n      )}\n      {branch.fulfilment.scheduling && <ScheduleSheet branch={branch} />}\n    </section>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,SAAS,gBAAgB;AAClC,SAAS,UAAU,gBAAgB;AACnC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAoBxB,cAyCI,YAzCJ;AAnBC,SAAS,kBAAkB;AAChC,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,kBAAkB;AACjC,QAAM,SAAS,iBAAiB;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,SAAS,MAAM,MAAM,SAAS;AAAA,IAClC,CAACA,YAAWA,QAAO,OAAO,KAAK;AAAA,EACjC;AACA,QAAM,OAAO,OAAO,kBAAkB,KAAK,YAAY,QAAQ;AAC/D,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AACA,QAAM,eACJ,KAAK,cAAc,kBAAkB,KAAK,aACtC,KAAK,WAAW,eAChB;AACN,SACE,qBAAC,aAAQ,WAAU,2BAA0B,cAAW,cACtD;AAAA,wBAAC,QAAG,wBAAU;AAAA,IACd,oBAAC,WAAW,QAAX,EAAkB,cAAW,oBAC3B,WAAC,EAAE,QAAQ,MACV,oBAAC,SAAI,WAAU,uBACZ,kBACE,OAAO,CAAC,WAAW,WAAW,SAAS,EACvC,IAAI,CAAC,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAEL,gBAAc,SAAS;AAAA,QACvB,WAAU;AAAA,QACV,SAAS,MAAM;AACb,mBAAS,IAAI;AACb,cAAI;AACF,gBACE,CAAC,OAAO;AAAA,cACN;AAAA,YACF,GACA;AACA;AAAA,gBACE;AAAA,cACF;AAAA,YACF;AAAA,UACF,SAAS,SAAS;AAChB;AAAA,cACE,mBAAmB,QACf,QAAQ,UACR;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,QAEC,qBAAW,WAAW,WAAW;AAAA;AAAA,MAxB7B;AAAA,IAyBP,CACD,GACL,GAEJ;AAAA,IACA,oBAAC,OAAO,QAAP,EAAc,UAAU,CAAC,MAAM,GAC7B,WAAC,EAAE,SAAS,MACX,qBAAC,OACE;AAAA,eAAS,WAAW,iBAAiB;AAAA,MAAiB;AAAA,MACtD,UAAU;AAAA,MACV,UAAU,UAAU,WAAM,SAAS,OAAO,KAAK;AAAA,OAClD,GAEJ;AAAA,IACC,SAAS,oBAAC,OAAE,MAAK,SAAS,iBAAM;AAAA,IAChC,SAAS,cACR,qBAAC,YACE;AAAA,WAAK,YAAY,SAAS,cACzB,qBAAC,YACC;AAAA,4BAAC,OAAG,eAAK,WAAW,QAAQ,OAAM;AAAA,QACjC,OAAO,OAAO,oBAAC,OAAO,KAAP,EAAW,SAAS,KAAK,WAAW,SAAS;AAAA,SAC/D;AAAA,MAEF,oBAAC,gBAAa;AAAA,MACd,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAED,gBACC,qBAAC,OAAE;AAAA;AAAA,MACa;AAAA,MACb,IAAI,KAAK,eAAe,MAAM;AAAA,QAC7B,WAAW;AAAA,QACX,WAAW;AAAA,QACX,UAAU,OAAO,YAAY,MAAM,MAAM;AAAA,MAC3C,CAAC,EAAE,OAAO,IAAI,KAAK,YAAY,CAAC;AAAA,OAClC;AAAA,IAED,OAAO,WAAW,cAAc,oBAAC,iBAAc,QAAgB;AAAA,KAClE;AAEJ;",
+  "names": ["branch"]
+}

package/dist/cart/line-editor.js

@@ -0,0 +1,35 @@
+// src/cart/line-editor.tsx
+import { Overlay, useOverlay } from "@zappie/foundations";
+import { useZappie } from "@zappie/sdk/react";
+import { ItemConfigurator } from "../item/configurator.js";
+import { useThemeClass } from "./theme-class.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LineEditor({ line, item }) {
+  const rootClass = useThemeClass("z-base-cart z-base-editor");
+  const overlay = useOverlay("cart_edit", line.id);
+  const client = useZappie();
+  return /* @__PURE__ */ jsxs(Overlay.Content, { "data-zappie-theme": "base", className: rootClass, children: [
+    /* @__PURE__ */ jsxs("header", { className: "z-base-cart-header", children: [
+      /* @__PURE__ */ jsxs(Overlay.Title, { children: [
+        "Edit ",
+        line.name
+      ] }),
+      /* @__PURE__ */ jsx(Overlay.Close, { className: "z-base-button-secondary", children: "Cancel" })
+    ] }),
+    overlay.isOpen && /* @__PURE__ */ jsx("div", { className: "z-base-cart-body", children: /* @__PURE__ */ jsx(
+      ItemConfigurator,
+      {
+        item,
+        ...line.menuId !== void 0 ? { menuId: line.menuId } : {},
+        line,
+        scope: `${client.config.store}:${client.cart.branchId}:${client.cart.fulfilment?.type}`,
+        onComplete: overlay.close
+      },
+      line.id
+    ) })
+  ] });
+}
+export {
+  LineEditor
+};
+//# sourceMappingURL=line-editor.js.map

package/dist/cart/line-editor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/cart/line-editor.tsx"],
+  "sourcesContent": ["import { Overlay, useOverlay } from \"@zappie/foundations\";\nimport type { CartLine, Item } from \"@zappie/sdk\";\nimport { useZappie } from \"@zappie/sdk/react\";\nimport { ItemConfigurator } from \"../item/configurator\";\nimport { useThemeClass } from \"./theme-class\";\nexport function LineEditor({ line, item }: { line: CartLine; item: Item }) {\n  const rootClass = useThemeClass(\"z-base-cart z-base-editor\");\n  const overlay = useOverlay(\"cart_edit\", line.id);\n  const client = useZappie();\n  return (\n    <Overlay.Content data-zappie-theme=\"base\" className={rootClass}>\n      <header className=\"z-base-cart-header\">\n        <Overlay.Title>Edit {line.name}</Overlay.Title>\n        <Overlay.Close className=\"z-base-button-secondary\">\n          Cancel\n        </Overlay.Close>\n      </header>\n      {overlay.isOpen && (\n        <div className=\"z-base-cart-body\">\n          <ItemConfigurator\n            key={line.id}\n            item={item}\n            {...(line.menuId !== undefined ? { menuId: line.menuId } : {})}\n            line={line}\n            scope={`${client.config.store}:${client.cart.branchId}:${client.cart.fulfilment?.type}`}\n            onComplete={overlay.close}\n          />\n        </div>\n      )}\n    </Overlay.Content>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,kBAAkB;AAEpC,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAQtB,SACA,KADA;AAPD,SAAS,WAAW,EAAE,MAAM,KAAK,GAAmC;AACzE,QAAM,YAAY,cAAc,2BAA2B;AAC3D,QAAM,UAAU,WAAW,aAAa,KAAK,EAAE;AAC/C,QAAM,SAAS,UAAU;AACzB,SACE,qBAAC,QAAQ,SAAR,EAAgB,qBAAkB,QAAO,WAAW,WACnD;AAAA,yBAAC,YAAO,WAAU,sBAChB;AAAA,2BAAC,QAAQ,OAAR,EAAc;AAAA;AAAA,QAAM,KAAK;AAAA,SAAK;AAAA,MAC/B,oBAAC,QAAQ,OAAR,EAAc,WAAU,2BAA0B,oBAEnD;AAAA,OACF;AAAA,IACC,QAAQ,UACP,oBAAC,SAAI,WAAU,oBACb;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACC,GAAI,KAAK,WAAW,SAAY,EAAE,QAAQ,KAAK,OAAO,IAAI,CAAC;AAAA,QAC5D;AAAA,QACA,OAAO,GAAG,OAAO,OAAO,KAAK,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,YAAY,IAAI;AAAA,QACrF,YAAY,QAAQ;AAAA;AAAA,MALf,KAAK;AAAA,IAMZ,GACF;AAAA,KAEJ;AAEJ;",
+  "names": []
+}