@zorgo/next 1.1.7 → 1.3.0

package/dist/components.js

@@ -28,32 +28,59 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/index.ts
-var components_exports = {};
-__export(components_exports, {
+// src/components/client/index.ts
+var client_exports = {};
+__export(client_exports, {
   ACCORDION_MENU_DEFAULT_ITEM_CLASSES: () => ACCORDION_MENU_DEFAULT_ITEM_CLASSES,
   AccordionMenu: () => AccordionMenu,
   BREADCRUMBS_DEFAULT_ITEM_CLASSES: () => BREADCRUMBS_DEFAULT_ITEM_CLASSES,
   Breadcrumbs: () => Breadcrumbs,
   CHECKOUT_FORM_DEFAULT_ITEM_CLASSES: () => CHECKOUT_FORM_DEFAULT_ITEM_CLASSES,
+  CHECKOUT_FORM_SLOTS: () => CHECKOUT_FORM_SLOTS,
+  CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES: () => CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES,
+  CLIENT_ITEM_FORM_SLOTS: () => CLIENT_ITEM_FORM_SLOTS,
   CheckoutForm: () => CheckoutForm,
+  CheckoutShell: () => CheckoutShell,
+  CheckoutSteps: () => CheckoutSteps,
+  ClientItemForm: () => ClientItemForm,
+  CommentsSection: () => CommentsSection,
+  ComponentsSection: () => ComponentsSection,
+  ConsentFields: () => ConsentFields,
+  ContactFields: () => ContactFields,
   CookieConsent: () => CookieConsent,
+  DetailsStep: () => DetailsStep,
   FIND_LOCATION_DEFAULT_ITEM_CLASSES: () => FIND_LOCATION_DEFAULT_ITEM_CLASSES,
   FindLocation: () => FindLocation,
   GRID_MENU_DEFAULT_ITEM_CLASSES: () => GRID_MENU_DEFAULT_ITEM_CLASSES,
   GridMenu: () => GridMenu,
-  ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES: () => ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES,
-  ItemCustomizationForm: () => ItemCustomizationForm,
+  ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES: () => CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES,
+  ItemCustomizationClient: () => ClientItemForm,
+  ItemCustomizationForm: () => ClientItemForm,
+  OptionButton: () => OptionButton,
+  OrderLine: () => OrderLine,
+  OrderLines: () => OrderLines,
+  OrderTotals: () => OrderTotals,
+  PaymentStep: () => PaymentStep,
+  PortionPicker: () => PortionPicker,
+  PortionSection: () => PortionSection,
+  PromoCode: () => PromoCode,
+  QuantitySection: () => QuantitySection,
+  RuleSection: () => RuleSection,
+  StatusPanel: () => StatusPanel,
+  SubmitButton: () => SubmitButton,
+  VariantSection: () => VariantSection,
   mergeAccordionMenuItemClasses: () => mergeAccordionMenuItemClasses,
   mergeBreadcrumbsItemClasses: () => mergeBreadcrumbsItemClasses,
   mergeCheckoutFormItemClasses: () => mergeCheckoutFormItemClasses,
+  mergeClientItemFormItemClasses: () => mergeClientItemFormItemClasses,
   mergeFindLocationItemClasses: () => mergeFindLocationItemClasses,
   mergeGridMenuItemClasses: () => mergeGridMenuItemClasses,
-  mergeItemCustomizationFormItemClasses: () => mergeItemCustomizationFormItemClasses
+  mergeItemCustomizationFormItemClasses: () => mergeClientItemFormItemClasses,
+  money: () => money3
 });
-module.exports = __toCommonJS(components_exports);
+module.exports = __toCommonJS(client_exports);
 
-// src/components/CookieConsent.tsx
+// src/components/client/CookieConsent.tsx
 var import_react12 = require("react");
 
 // ../../node_modules/@headlessui/react/dist/utils/env.js
@@ -548,7 +575,7 @@ var me = Y(Fe);
 var Oe = Y(Le);
 var Ke = Object.assign(X, { Child: Oe, Root: X });
 
-// src/components/CookieConsent.tsx
+// src/components/client/CookieConsent.tsx
 var import_hooks = require("@zorgo/next");
 var import_jsx_runtime = require("react/jsx-runtime");
 function CookieConsent() {
@@ -603,47 +630,21 @@ function CookieConsent() {
   );
 }
 
-// src/components/Breadcrumbs.tsx
+// src/components/client/GridMenu.tsx
+var import_image = __toESM(require("next/image"));
 var import_link = __toESM(require("next/link"));
-var import_lucide_react = require("lucide-react");
+var import_menuSlugs = require("@zorgo/next/slugs");
+var import_menuUtils2 = require("@zorgo/next/images");
+
+// src/images.ts
+var import_menuUtils = require("@zorgo/next/images");
+var ITEM_IMAGE_PREFIX = "/images/items/";
+
+// src/components/client/GridMenu.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function cn(...parts) {
   return parts.filter(Boolean).join(" ");
 }
-var BREADCRUMBS_DEFAULT_ITEM_CLASSES = {
-  baseContainer: "flex flex-row items-center gap-2 text-sm opacity-75",
-  crumbLink: "hover:opacity-75 transition-all duration-300 underline-offset-2 hover:underline",
-  crumbText: "font-semibold",
-  separator: "h-4 w-4 opacity-50"
-};
-function mergeBreadcrumbsItemClasses(overrides) {
-  const d3 = BREADCRUMBS_DEFAULT_ITEM_CLASSES;
-  return {
-    baseContainer: cn(d3.baseContainer, overrides?.baseContainer),
-    crumbLink: cn(d3.crumbLink, overrides?.crumbLink),
-    crumbText: cn(d3.crumbText, overrides?.crumbText),
-    separator: cn(d3.separator, overrides?.separator)
-  };
-}
-function Breadcrumbs({
-  items,
-  itemClasses
-}) {
-  const slots = mergeBreadcrumbsItemClasses(itemClasses);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { "aria-label": "Breadcrumb", className: slots.baseContainer, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex flex-row items-center gap-2", children: [
-    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronRight, { className: slots.separator }),
-    item.href ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_link.default, { href: item.href, className: slots.crumbLink, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: slots.crumbText, children: item.label })
-  ] }, `${item.label}-${index}`)) });
-}
-
-// src/components/GridMenu.tsx
-var import_link2 = __toESM(require("next/link"));
-var import_hooks2 = require("@zorgo/next");
-var import_menuSlugs = require("@zorgo/next/slugs");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function cn2(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
 function money(cents) {
   return `$${(cents / 100).toFixed(2)}`;
 }
@@ -662,25 +663,25 @@ var GRID_MENU_DEFAULT_ITEM_CLASSES = {
 function mergeGridMenuItemClasses(overrides) {
   const d3 = GRID_MENU_DEFAULT_ITEM_CLASSES;
   return {
-    baseContainer: cn2(d3.baseContainer, overrides?.baseContainer),
-    categoryContainer: cn2(
+    baseContainer: cn(d3.baseContainer, overrides?.baseContainer),
+    categoryContainer: cn(
       d3.categoryContainer,
       overrides?.categoryContainer
     ),
-    categoryTitle: cn2(d3.categoryTitle, overrides?.categoryTitle),
-    itemCardContainer: cn2(
+    categoryTitle: cn(d3.categoryTitle, overrides?.categoryTitle),
+    itemCardContainer: cn(
       d3.itemCardContainer,
       overrides?.itemCardContainer
     ),
-    itemCard: cn2(d3.itemCard, overrides?.itemCard),
-    itemCardImage: cn2(d3.itemCardImage, overrides?.itemCardImage),
-    itemCardTextContainer: cn2(
+    itemCard: cn(d3.itemCard, overrides?.itemCard),
+    itemCardImage: cn(d3.itemCardImage, overrides?.itemCardImage),
+    itemCardTextContainer: cn(
       d3.itemCardTextContainer,
       overrides?.itemCardTextContainer
     ),
-    itemCardName: cn2(d3.itemCardName, overrides?.itemCardName),
-    itemCardPrice: cn2(d3.itemCardPrice, overrides?.itemCardPrice),
-    itemCardOldPrice: cn2(d3.itemCardOldPrice, overrides?.itemCardOldPrice)
+    itemCardName: cn(d3.itemCardName, overrides?.itemCardName),
+    itemCardPrice: cn(d3.itemCardPrice, overrides?.itemCardPrice),
+    itemCardOldPrice: cn(d3.itemCardOldPrice, overrides?.itemCardOldPrice)
   };
 }
 function GridMenu({
@@ -688,26 +689,25 @@ function GridMenu({
   categories,
   itemClasses
 }) {
-  const { getItemImageUrl } = (0, import_hooks2.useMenu)();
   const slots = mergeGridMenuItemClasses(itemClasses);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.baseContainer, children: categories.map((category) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: slots.baseContainer, children: categories.map((category) => {
     const itemsInCategory = items.filter(
       (item) => item.category_id === category.category_id
     );
     if (itemsInCategory.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         className: slots.categoryContainer,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: slots.categoryTitle, children: category.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.itemCardContainer, children: itemsInCategory.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: slots.categoryTitle, children: category.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: slots.itemCardContainer, children: itemsInCategory.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             ItemCard,
             {
               item,
-              imageUrl: getItemImageUrl(item.image_path),
+              imageUrl: (0, import_menuUtils2.menuImageUrl)(item.images?.[0]),
               slots
             },
             item.base_item_id
@@ -725,40 +725,43 @@ function ItemCard({
 }) {
   const variant = item.variants[0];
   const onSale = variant?.display_price != null && variant.display_price < variant.price;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_link2.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_link.default,
     {
       href: `/menu/${(0, import_menuSlugs.menuItemSlug)(item.name, item.base_item_id)}`,
       className: slots.itemCard,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.itemCardImage, children: imageUrl && // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "img",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: slots.itemCardImage, children: imageUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_image.default,
           {
             src: imageUrl,
             alt: item.name,
+            width: 640,
+            height: 640,
+            unoptimized: !imageUrl.startsWith(ITEM_IMAGE_PREFIX),
+            sizes: "(min-width: 1024px) 320px, (min-width: 640px) 50vw, 100vw",
             className: "w-full h-full object-cover"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.itemCardTextContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardName, children: item.name }),
-          variant && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: onSale ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardPrice, children: money(variant.display_price) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardOldPrice, children: money(variant.price) })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardPrice, children: money(variant.price) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: slots.itemCardTextContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.itemCardName, children: item.name }),
+          variant && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: onSale ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.itemCardPrice, children: money(variant.display_price) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.itemCardOldPrice, children: money(variant.price) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.itemCardPrice, children: money(variant.price) }) })
         ] })
       ]
     }
   );
 }
 
-// src/components/AccordionMenu.tsx
-var import_link3 = __toESM(require("next/link"));
+// src/components/client/AccordionMenu.tsx
+var import_link2 = __toESM(require("next/link"));
 var import_react14 = require("react");
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react = require("lucide-react");
 var import_menuSlugs2 = require("@zorgo/next/slugs");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function cn3(...parts) {
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cn2(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function money2(cents) {
@@ -782,34 +785,34 @@ var ACCORDION_MENU_DEFAULT_ITEM_CLASSES = {
 function mergeAccordionMenuItemClasses(overrides) {
   const d3 = ACCORDION_MENU_DEFAULT_ITEM_CLASSES;
   return {
-    baseContainer: cn3(d3.baseContainer, overrides?.baseContainer),
-    categoryContainer: cn3(
+    baseContainer: cn2(d3.baseContainer, overrides?.baseContainer),
+    categoryContainer: cn2(
       d3.categoryContainer,
       overrides?.categoryContainer
     ),
-    categoryTrigger: cn3(d3.categoryTrigger, overrides?.categoryTrigger),
-    categoryTitle: cn3(d3.categoryTitle, overrides?.categoryTitle),
-    categoryIndicator: cn3(
+    categoryTrigger: cn2(d3.categoryTrigger, overrides?.categoryTrigger),
+    categoryTitle: cn2(d3.categoryTitle, overrides?.categoryTitle),
+    categoryIndicator: cn2(
       d3.categoryIndicator,
       overrides?.categoryIndicator
     ),
-    itemsContainer: cn3(d3.itemsContainer, overrides?.itemsContainer),
-    itemCard: cn3(d3.itemCard, overrides?.itemCard),
-    itemCardTextContainer: cn3(
+    itemsContainer: cn2(d3.itemsContainer, overrides?.itemsContainer),
+    itemCard: cn2(d3.itemCard, overrides?.itemCard),
+    itemCardTextContainer: cn2(
       d3.itemCardTextContainer,
       overrides?.itemCardTextContainer
     ),
-    itemCardName: cn3(d3.itemCardName, overrides?.itemCardName),
-    itemCardDescription: cn3(
+    itemCardName: cn2(d3.itemCardName, overrides?.itemCardName),
+    itemCardDescription: cn2(
       d3.itemCardDescription,
       overrides?.itemCardDescription
     ),
-    itemCardPriceContainer: cn3(
+    itemCardPriceContainer: cn2(
       d3.itemCardPriceContainer,
       overrides?.itemCardPriceContainer
     ),
-    itemCardPrice: cn3(d3.itemCardPrice, overrides?.itemCardPrice),
-    itemCardOldPrice: cn3(d3.itemCardOldPrice, overrides?.itemCardOldPrice)
+    itemCardPrice: cn2(d3.itemCardPrice, overrides?.itemCardPrice),
+    itemCardOldPrice: cn2(d3.itemCardOldPrice, overrides?.itemCardOldPrice)
   };
 }
 function AccordionMenu({
@@ -818,14 +821,14 @@ function AccordionMenu({
   itemClasses
 }) {
   const slots = mergeAccordionMenuItemClasses(itemClasses);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: slots.baseContainer, children: categories.map((category) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.baseContainer, children: categories.map((category) => {
     const itemsInCategory = items.filter(
       (item) => item.category_id === category.category_id
     );
     if (itemsInCategory.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       MenuCategory,
       {
         category,
@@ -842,27 +845,27 @@ function MenuCategory({
   slots
 }) {
   const [isExpanded, setIsExpanded] = (0, import_react14.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.categoryContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.categoryContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setIsExpanded(!isExpanded),
         className: slots.categoryTrigger,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: slots.categoryTitle, children: category.name }),
-          isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronUp, { className: slots.categoryIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronDown, { className: slots.categoryIndicator })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: slots.categoryTitle, children: category.name }),
+          isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronUp, { className: slots.categoryIndicator }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, { className: slots.categoryIndicator })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        className: cn3(
+        className: cn2(
           isExpanded ? "flex" : "hidden",
           slots.itemsContainer
         ),
-        children: itemsInCategory.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        children: itemsInCategory.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           ItemCard2,
           {
             item,
@@ -880,36 +883,33 @@ function ItemCard2({
 }) {
   const variant = item.variants[0];
   const onSale = variant?.display_price != null && variant.display_price < variant.price;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_link3.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_link2.default,
     {
       href: `/menu/${(0, import_menuSlugs2.menuItemSlug)(item.name, item.base_item_id)}`,
       className: slots.itemCard,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.itemCardTextContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.itemCardName, children: item.name }),
-          item.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.itemCardDescription, children: item.description })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.itemCardTextContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardName, children: item.name }),
+          item.description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardDescription, children: item.description })
         ] }),
-        variant && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: slots.itemCardPriceContainer, children: onSale ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.itemCardPrice, children: money2(variant.display_price) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.itemCardOldPrice, children: money2(variant.price) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.itemCardPrice, children: money2(variant.price) }) })
+        variant && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: slots.itemCardPriceContainer, children: onSale ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardPrice, children: money2(variant.display_price) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardOldPrice, children: money2(variant.price) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.itemCardPrice, children: money2(variant.price) }) })
       ]
     }
   );
 }
 
-// src/components/ItemCustomizationForm.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_hooks3 = require("@zorgo/next");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function cn4(...parts) {
+// src/components/client/ItemForm/classes.ts
+function cn3(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function money3(cents) {
   return `$${(cents / 100).toFixed(2)}`;
 }
-var ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES = {
+var CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES = {
   baseContainer: "flex flex-col gap-8",
   title: "text-4xl font-extrabold text-primary",
   description: "opacity-70 text-xl",
@@ -927,57 +927,492 @@ var ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES = {
   incrementButton: "bg-background text-foreground w-10 h-10 rounded-xl flex items-center justify-center hover:bg-foreground hover:text-background transition-all duration-300",
   servingsValue: "w-8 md:w-12 font-semibold opacity-75 text-center",
   ruleError: "text-sm text-red-500",
+  portionHint: "text-base font-normal opacity-60",
   commentsTextarea: "p-4 rounded-xl border-3 border-foreground/[15%] outline-none resize-none",
   quantityRow: "flex flex-row items-center gap-4 text-xl",
   submitButton: "bg-primary text-primary-foreground p-4 rounded-xl text-lg font-semibold hover:bg-primary/80 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300",
   notFound: ""
 };
-function mergeItemCustomizationFormItemClasses(overrides) {
-  const d3 = ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES;
+function mergeClientItemFormItemClasses(overrides) {
+  const d3 = CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES;
   return {
-    baseContainer: cn4(d3.baseContainer, overrides?.baseContainer),
-    title: cn4(d3.title, overrides?.title),
-    description: cn4(d3.description, overrides?.description),
-    section: cn4(d3.section, overrides?.section),
-    sectionTitle: cn4(d3.sectionTitle, overrides?.sectionTitle),
-    optionsRow: cn4(d3.optionsRow, overrides?.optionsRow),
-    optionButton: cn4(d3.optionButton, overrides?.optionButton),
-    optionButtonSelected: cn4(
+    baseContainer: cn3(d3.baseContainer, overrides?.baseContainer),
+    title: cn3(d3.title, overrides?.title),
+    description: cn3(d3.description, overrides?.description),
+    section: cn3(d3.section, overrides?.section),
+    sectionTitle: cn3(d3.sectionTitle, overrides?.sectionTitle),
+    optionsRow: cn3(d3.optionsRow, overrides?.optionsRow),
+    optionButton: cn3(d3.optionButton, overrides?.optionButton),
+    optionButtonSelected: cn3(
       d3.optionButtonSelected,
       overrides?.optionButtonSelected
     ),
-    optionButtonUnselected: cn4(
+    optionButtonUnselected: cn3(
       d3.optionButtonUnselected,
       overrides?.optionButtonUnselected
     ),
-    optionButtonLabel: cn4(
+    optionButtonLabel: cn3(
       d3.optionButtonLabel,
       overrides?.optionButtonLabel
     ),
-    optionButtonUpcharge: cn4(
+    optionButtonUpcharge: cn3(
       d3.optionButtonUpcharge,
       overrides?.optionButtonUpcharge
     ),
-    servingsRow: cn4(d3.servingsRow, overrides?.servingsRow),
-    servingsLabel: cn4(d3.servingsLabel, overrides?.servingsLabel),
-    servingsControls: cn4(d3.servingsControls, overrides?.servingsControls),
-    incrementButton: cn4(d3.incrementButton, overrides?.incrementButton),
-    servingsValue: cn4(d3.servingsValue, overrides?.servingsValue),
-    ruleError: cn4(d3.ruleError, overrides?.ruleError),
-    commentsTextarea: cn4(d3.commentsTextarea, overrides?.commentsTextarea),
-    quantityRow: cn4(d3.quantityRow, overrides?.quantityRow),
-    submitButton: cn4(d3.submitButton, overrides?.submitButton),
-    notFound: cn4(d3.notFound, overrides?.notFound)
+    servingsRow: cn3(d3.servingsRow, overrides?.servingsRow),
+    servingsLabel: cn3(d3.servingsLabel, overrides?.servingsLabel),
+    servingsControls: cn3(d3.servingsControls, overrides?.servingsControls),
+    incrementButton: cn3(d3.incrementButton, overrides?.incrementButton),
+    servingsValue: cn3(d3.servingsValue, overrides?.servingsValue),
+    ruleError: cn3(d3.ruleError, overrides?.ruleError),
+    portionHint: cn3(d3.portionHint, overrides?.portionHint),
+    commentsTextarea: cn3(d3.commentsTextarea, overrides?.commentsTextarea),
+    quantityRow: cn3(d3.quantityRow, overrides?.quantityRow),
+    submitButton: cn3(d3.submitButton, overrides?.submitButton),
+    notFound: cn3(d3.notFound, overrides?.notFound)
+  };
+}
+var CLIENT_ITEM_FORM_SLOTS = mergeClientItemFormItemClasses();
+
+// src/components/client/ItemForm/ClientItemForm.tsx
+var import_react15 = require("react");
+var import_navigation = require("next/navigation");
+var import_hooks2 = require("@zorgo/next");
+
+// src/components/client/ItemForm/Breadcrumbs.tsx
+var import_link3 = __toESM(require("next/link"));
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function cn4(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var BREADCRUMBS_DEFAULT_ITEM_CLASSES = {
+  baseContainer: "flex flex-row items-center gap-2 text-sm opacity-75",
+  crumbLink: "hover:opacity-75 transition-all duration-300 underline-offset-2 hover:underline",
+  crumbText: "font-semibold",
+  separator: "h-4 w-4 opacity-50"
+};
+function mergeBreadcrumbsItemClasses(overrides) {
+  const d3 = BREADCRUMBS_DEFAULT_ITEM_CLASSES;
+  return {
+    baseContainer: cn4(d3.baseContainer, overrides?.baseContainer),
+    crumbLink: cn4(d3.crumbLink, overrides?.crumbLink),
+    crumbText: cn4(d3.crumbText, overrides?.crumbText),
+    separator: cn4(d3.separator, overrides?.separator)
   };
 }
-function ItemCustomizationForm({
+function Breadcrumbs({
+  items,
+  itemClasses
+}) {
+  const slots = mergeBreadcrumbsItemClasses(itemClasses);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { "aria-label": "Breadcrumb", className: slots.baseContainer, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-row items-center gap-2", children: [
+    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ChevronRight, { className: slots.separator }),
+    item.href ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_link3.default, { href: item.href, className: slots.crumbLink, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: slots.crumbText, children: item.label })
+  ] }, `${item.label}-${index}`)) });
+}
+
+// src/components/client/ItemForm/CommentsSection.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CommentsSection({
+  comments,
+  setComments,
+  title = "Comments",
+  placeholder = "Special instructions...",
+  rows = 2,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "textarea",
+      {
+        value: comments,
+        onChange: (e) => setComments(e.target.value),
+        placeholder,
+        className: slots.commentsTextarea,
+        rows
+      }
+    )
+  ] });
+}
+
+// src/components/client/ItemForm/ComponentsSection.tsx
+var import_portionUtils = require("@zorgo/next");
+
+// src/components/client/ItemForm/OptionButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function OptionButton({
+  label,
+  subtext,
+  selected,
+  onClick,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn3(
+        slots.optionButton,
+        selected ? slots.optionButtonSelected : slots.optionButtonUnselected
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: slots.optionButtonLabel, children: label }),
+        subtext && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: slots.optionButtonUpcharge, children: subtext })
+      ]
+    }
+  );
+}
+
+// src/components/client/ItemForm/ComponentsSection.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ComponentsSection({
+  variant,
+  draft,
+  setComponentServings,
+  activeSection = null,
+  divisions = 1,
+  scheme,
+  title = "Includes",
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  const components = variant.components ?? [];
+  if (components.length === 0) return null;
+  const portion = activeSection != null ? `${activeSection}/${divisions}` : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.optionsRow, children: components.map((component) => {
+      const defaultServings = component.servings_per_item ?? 1;
+      const rows = (draft?.components ?? []).filter(
+        (c6) => c6.id === component.id
+      );
+      const row = rows.find((c6) => c6.portion === portion) ?? rows.find((c6) => !c6.portion);
+      const servings = row?.quantity_servings ?? defaultServings;
+      const selected = servings > 0;
+      const removedElsewhere = !portion && rows.some((c6) => c6.quantity_servings === 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        OptionButton,
+        {
+          label: component.name,
+          subtext: removedElsewhere && scheme ? `No ${component.name.toLowerCase()} on ${rows.filter((c6) => c6.quantity_servings === 0).map(
+            (c6) => (0, import_portionUtils.portionLabel)(c6.portion, scheme).toLowerCase()
+          ).join(", ")}` : void 0,
+          selected,
+          onClick: () => setComponentServings(
+            component.id,
+            selected ? 0 : defaultServings,
+            portion
+          ),
+          slots
+        },
+        component.id
+      );
+    }) })
+  ] });
+}
+
+// src/components/client/ItemForm/PortionPicker.tsx
+var import_portionUtils2 = require("@zorgo/next");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function cn5(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+var SECTION_FILL = "var(--color-background-elevated, #fff)";
+function sectionClass(isActive, isCovered) {
+  return cn5(
+    "transition-all duration-200 cursor-pointer",
+    isActive ? "fill-primary stroke-primary" : isCovered ? "fill-primary/30 stroke-foreground/20" : "stroke-foreground/20 hover:fill-primary/10"
+  );
+}
+function RadialPicker({ divisions, active, covered = [], onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 100 100", className: "w-32 h-32", role: "group", children: Array.from({ length: divisions }, (_, i4) => {
+    const index = i4 + 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "path",
+      {
+        d: (0, import_portionUtils2.radialSectionPath)(index, divisions),
+        strokeWidth: 2,
+        style: { fill: SECTION_FILL },
+        className: sectionClass(active === index, covered.includes(index)),
+        onClick: () => onSelect(active === index ? null : index)
+      },
+      index
+    );
+  }) });
+}
+function GridPicker({ divisions, active, covered = [], onSelect }) {
+  const cols = Math.ceil(Math.sqrt(divisions));
+  const rows = Math.ceil(divisions / cols);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      className: "grid gap-1 w-32 h-32",
+      style: {
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, 1fr)`,
+        gridAutoFlow: "column"
+      },
+      children: Array.from({ length: divisions }, (_, i4) => {
+        const index = i4 + 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active === index,
+            onClick: () => onSelect(active === index ? null : index),
+            className: cn5(
+              "rounded-lg border-3 transition-all duration-200",
+              active === index ? "bg-primary border-primary" : covered.includes(index) ? "bg-primary/30 border-foreground/15" : "bg-background-elevated border-foreground/15 hover:bg-primary/10"
+            )
+          },
+          index
+        );
+      })
+    }
+  );
+}
+function LinearPicker({ divisions, active, covered = [], onSelect }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-row w-full max-w-xs h-12 gap-1", children: Array.from({ length: divisions }, (_, i4) => {
+    const index = i4 + 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active === index,
+        onClick: () => onSelect(active === index ? null : index),
+        className: cn5(
+          "flex-1 rounded-lg border-3 transition-all duration-200",
+          active === index ? "bg-primary border-primary" : covered.includes(index) ? "bg-primary/30 border-foreground/15" : "bg-background-elevated border-foreground/15 hover:bg-primary/10"
+        )
+      },
+      index
+    );
+  }) });
+}
+function CountPicker({
+  divisions,
+  active,
+  covered = [],
+  onSelect,
+  scheme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-row flex-wrap gap-2", children: Array.from({ length: divisions }, (_, i4) => {
+    const index = i4 + 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active === index,
+        onClick: () => onSelect(active === index ? null : index),
+        className: cn5(
+          "px-4 py-2 rounded-xl border-3 font-semibold transition-all duration-200",
+          active === index ? "bg-primary text-primary-foreground border-primary" : covered.includes(index) ? "bg-primary/30 border-foreground/15" : "bg-background-elevated border-foreground/15 hover:bg-primary/10"
+        ),
+        children: (0, import_portionUtils2.portionLabel)(`${index}/${divisions}`, scheme)
+      },
+      index
+    );
+  }) });
+}
+function PortionPicker({
+  scheme,
+  divisions,
+  active,
+  covered,
+  onSelect,
+  onDivisionsChange,
+  className
+}) {
+  const cuts = (0, import_portionUtils2.divisionsFor)(scheme);
+  const shapeProps = { divisions, active, covered, onSelect };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn5("flex flex-col gap-4 items-center", className), children: [
+    cuts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-row gap-2", children: cuts.map((count) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": divisions === count,
+        onClick: () => onDivisionsChange(count),
+        className: cn5(
+          "px-4 py-2 rounded-xl border-3 font-semibold transition-all duration-200",
+          divisions === count ? "bg-primary text-primary-foreground border-primary" : "bg-background-elevated border-foreground/15 hover:bg-primary/10"
+        ),
+        children: count === 1 ? "Whole" : `${count} parts`
+      },
+      count
+    )) }),
+    divisions > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      scheme.geometry === "radial" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadialPicker, { ...shapeProps }),
+      scheme.geometry === "grid" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GridPicker, { ...shapeProps }),
+      scheme.geometry === "linear" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinearPicker, { ...shapeProps }),
+      scheme.geometry === "count" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CountPicker, { ...shapeProps, scheme })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "opacity-70", children: active == null ? divisions > 1 ? "Editing the whole item \u2014 tap a section to edit just that part" : "Editing the whole item" : `Editing ${(0, import_portionUtils2.portionLabel)(`${active}/${divisions}`, scheme).toLowerCase()}` })
+  ] });
+}
+
+// src/components/client/ItemForm/PortionSection.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function PortionSection({
+  scheme,
+  divisions,
+  activeSection,
+  setActiveSection,
+  setDivisions,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { className: slots.sectionTitle, children: scheme.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      PortionPicker,
+      {
+        scheme,
+        divisions,
+        active: activeSection,
+        onSelect: setActiveSection,
+        onDivisionsChange: setDivisions
+      }
+    )
+  ] });
+}
+
+// src/components/client/ItemForm/QuantitySection.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function QuantitySection({
+  quantity,
+  setQuantity,
+  title = "How many?",
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: slots.quantityRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          className: slots.incrementButton,
+          onClick: () => setQuantity((q2) => q2 - 1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Minus, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: slots.servingsValue, children: quantity }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          type: "button",
+          className: slots.incrementButton,
+          onClick: () => setQuantity((q2) => q2 + 1),
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Plus, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/client/ItemForm/RuleSection.tsx
+var import_portionUtils3 = require("@zorgo/next");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function RuleSection({
+  rule,
+  activeSection = null,
+  divisions = 1,
+  scheme,
+  placeOption,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  const portion = rule.portionable && activeSection != null ? `${activeSection}/${divisions}` : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("h2", { className: slots.sectionTitle, children: [
+      rule.group_name,
+      activeSection != null && !rule.portionable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: slots.portionHint, children: " \u2014 whole item only" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: slots.optionsRow, children: rule.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      OptionButton,
+      {
+        label: option.name,
+        subtext: (
+          // where it sits beats what it costs — the price is
+          // already in the running total
+          option.portion && scheme ? (0, import_portionUtils3.portionLabel)(option.portion, scheme) : option.upcharge > 0 ? `+${money3(option.upcharge)}` : void 0
+        ),
+        selected: option.selected,
+        onClick: () => placeOption ? placeOption(
+          rule.rule_id,
+          (0, import_portionUtils3.parsePortionKey)(option.key).baseKey,
+          portion,
+          rule.max
+        ) : option.toggle(),
+        slots
+      },
+      (0, import_portionUtils3.parsePortionKey)(option.key).baseKey
+    )) }),
+    rule.message() && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: slots.ruleError, children: rule.message() })
+  ] });
+}
+
+// src/components/client/ItemForm/SubmitButton.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SubmitButton({
+  canSubmit,
+  unmetRule,
+  price,
+  salePrice,
+  isEditMode,
+  onSubmit,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      type: "button",
+      disabled: !canSubmit,
+      onClick: onSubmit,
+      className: slots.submitButton,
+      children: unmetRule ? `Choose ${unmetRule.group_name}` : `${isEditMode ? "Save changes" : "Add to cart"} \u2014 ${money3(salePrice ?? price)}`
+    }
+  );
+}
+
+// src/components/client/ItemForm/VariantSection.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function VariantSection({
+  variants,
+  variant,
+  setVariant,
+  title = "Variants",
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  if (variants.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: slots.section, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: slots.optionsRow, children: variants.map((v2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      OptionButton,
+      {
+        label: v2.name,
+        subtext: money3(v2.price),
+        selected: v2.item_id === variant.item_id,
+        onClick: () => setVariant(v2),
+        slots
+      },
+      v2.item_id
+    )) })
+  ] });
+}
+
+// src/components/client/ItemForm/ClientItemForm.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ClientItemForm({
   baseItemId,
   seed,
   editIndex,
   itemClasses,
   onSubmitSuccess
 }) {
-  const slots = mergeItemCustomizationFormItemClasses(itemClasses);
+  const router = (0, import_navigation.useRouter)();
+  const slots = mergeClientItemFormItemClasses(itemClasses);
   const {
     item,
     variant,
@@ -995,17 +1430,21 @@ function ItemCustomizationForm({
     price,
     salePrice,
     isEditMode,
-    draft
-  } = (0, import_hooks3.useItemCustomization)(baseItemId, seed, editIndex);
-  const { categories } = (0, import_hooks3.useMenu)();
+    draft,
+    portionScheme,
+    placeOption,
+    recutSelections
+  } = (0, import_hooks2.useItemCustomization)(baseItemId, seed, editIndex);
+  const { categories } = (0, import_hooks2.useMenu)();
+  const [cut, setCut] = (0, import_react15.useState)(1);
+  const [activeSection, setActiveSection] = (0, import_react15.useState)(null);
+  const divisions = portionScheme ? Math.min(Math.max(cut, portionScheme.min_divisions), portionScheme.max_divisions) : 1;
   if (!item) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: slots.notFound, children: "Item not found." });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: slots.notFound, children: "Item not found." });
   }
-  const category = categories.find(
-    (c6) => c6.category_id === item.category_id
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.baseContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const category = categories.find((c6) => c6.category_id === item.category_id);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: slots.baseContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Breadcrumbs,
       {
         items: [
@@ -1015,141 +1454,98 @@ function ItemCustomizationForm({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: slots.title, children: item.name }),
-    item.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.description, children: item.description }),
-    variants.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: "Variants" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: slots.optionsRow, children: variants.map((v2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        OptionButton,
-        {
-          label: v2.name,
-          subtext: money3(v2.price),
-          selected: v2.item_id === variant.item_id,
-          onClick: () => setVariant(v2),
-          slots
-        },
-        v2.item_id
-      )) })
-    ] }),
-    (variant.components?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: "Includes" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: slots.optionsRow, children: variant.components.map((component) => {
-        const defaultServings = component.servings_per_item ?? 1;
-        const servings = draft?.components?.find(
-          (c6) => c6.id === component.id
-        )?.quantity_servings ?? defaultServings;
-        const selected = servings > 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          OptionButton,
-          {
-            label: component.name,
-            selected,
-            onClick: () => setComponentServings(
-              component.id,
-              selected ? 0 : defaultServings
-            ),
-            slots
-          },
-          component.id
-        );
-      }) })
-    ] }),
-    ruleGroups.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: rule.group_name }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: slots.optionsRow, children: rule.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        OptionButton,
-        {
-          label: option.name,
-          subtext: option.upcharge > 0 ? `+${money3(option.upcharge)}` : void 0,
-          selected: option.selected,
-          onClick: option.toggle,
-          slots
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: slots.title, children: item.name }),
+    item.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: slots.description, children: item.description }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      VariantSection,
+      {
+        variants,
+        variant,
+        setVariant,
+        slots
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ComponentsSection,
+      {
+        variant,
+        draft,
+        setComponentServings,
+        activeSection,
+        divisions,
+        scheme: portionScheme,
+        slots
+      }
+    ),
+    portionScheme && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      PortionSection,
+      {
+        scheme: portionScheme,
+        divisions,
+        activeSection,
+        setActiveSection,
+        setDivisions: (next) => {
+          recutSelections(next);
+          setCut(next);
+          setActiveSection(
+            (s5) => s5 != null && (next === 1 || s5 > next) ? null : s5
+          );
         },
-        option.key
-      )) }),
-      rule.message() && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.ruleError, children: rule.message() })
-    ] }, rule.rule_id)),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: "Comments" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "textarea",
-        {
-          value: comments,
-          onChange: (e) => setComments(e.target.value),
-          placeholder: "Special instructions...",
-          className: slots.commentsTextarea,
-          rows: 2
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.section, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: slots.sectionTitle, children: "How many?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.quantityRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            className: slots.incrementButton,
-            onClick: () => setQuantity((q2) => Math.max(1, q2 - 1)),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Minus, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.servingsValue, children: quantity }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
-          {
-            type: "button",
-            className: slots.incrementButton,
-            onClick: () => setQuantity((q2) => q2 + 1),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Plus, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
+        slots
+      }
+    ),
+    ruleGroups.map((rule) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      RuleSection,
       {
-        type: "button",
-        disabled: !canSubmit,
-        onClick: () => {
+        rule,
+        activeSection,
+        divisions,
+        scheme: portionScheme,
+        placeOption,
+        slots
+      },
+      rule.rule_id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      CommentsSection,
+      {
+        comments,
+        setComments,
+        slots
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      QuantitySection,
+      {
+        quantity,
+        setQuantity,
+        slots
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      SubmitButton,
+      {
+        canSubmit,
+        unmetRule,
+        price,
+        salePrice,
+        isEditMode,
+        onSubmit: () => {
           submit();
-          onSubmitSuccess?.();
+          if (onSubmitSuccess) onSubmitSuccess();
+          else router.push("/menu");
         },
-        className: slots.submitButton,
-        children: unmetRule ? `Choose ${unmetRule.group_name}` : `${isEditMode ? "Save changes" : "Add to cart"} \u2014 ${money3(salePrice ?? price)}`
+        slots
       }
     )
   ] });
 }
-function OptionButton({
-  label,
-  subtext,
-  selected,
-  onClick,
-  slots
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn4(
-        slots.optionButton,
-        selected ? slots.optionButtonSelected : slots.optionButtonUnselected
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: slots.optionButtonLabel, children: label }),
-        subtext && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: slots.optionButtonUpcharge, children: subtext })
-      ]
-    }
-  );
-}
 
-// src/components/FindLocation.tsx
-var import_react15 = require("react");
+// src/components/client/FindLocation.tsx
+var import_react16 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function cn5(...parts) {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function cn6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function searchableText(location) {
@@ -1200,26 +1596,26 @@ var FIND_LOCATION_DEFAULT_ITEM_CLASSES = {
 function mergeFindLocationItemClasses(overrides) {
   const d3 = FIND_LOCATION_DEFAULT_ITEM_CLASSES;
   return {
-    baseContainer: cn5(d3.baseContainer, overrides?.baseContainer),
-    searchContainer: cn5(d3.searchContainer, overrides?.searchContainer),
-    searchIcon: cn5(d3.searchIcon, overrides?.searchIcon),
-    searchInput: cn5(d3.searchInput, overrides?.searchInput),
-    noMatchesMessage: cn5(d3.noMatchesMessage, overrides?.noMatchesMessage),
-    emptyMessage: cn5(d3.emptyMessage, overrides?.emptyMessage),
-    list: cn5(d3.list, overrides?.list),
-    locationRow: cn5(d3.locationRow, overrides?.locationRow),
-    locationRowSelected: cn5(
+    baseContainer: cn6(d3.baseContainer, overrides?.baseContainer),
+    searchContainer: cn6(d3.searchContainer, overrides?.searchContainer),
+    searchIcon: cn6(d3.searchIcon, overrides?.searchIcon),
+    searchInput: cn6(d3.searchInput, overrides?.searchInput),
+    noMatchesMessage: cn6(d3.noMatchesMessage, overrides?.noMatchesMessage),
+    emptyMessage: cn6(d3.emptyMessage, overrides?.emptyMessage),
+    list: cn6(d3.list, overrides?.list),
+    locationRow: cn6(d3.locationRow, overrides?.locationRow),
+    locationRowSelected: cn6(
       d3.locationRowSelected,
       overrides?.locationRowSelected
     ),
-    locationRowUnselected: cn5(
+    locationRowUnselected: cn6(
       d3.locationRowUnselected,
       overrides?.locationRowUnselected
     ),
-    locationButton: cn5(d3.locationButton, overrides?.locationButton),
-    locationName: cn5(d3.locationName, overrides?.locationName),
-    locationAddress: cn5(d3.locationAddress, overrides?.locationAddress),
-    selectButton: cn5(d3.selectButton, overrides?.selectButton)
+    locationButton: cn6(d3.locationButton, overrides?.locationButton),
+    locationName: cn6(d3.locationName, overrides?.locationName),
+    locationAddress: cn6(d3.locationAddress, overrides?.locationAddress),
+    selectButton: cn6(d3.selectButton, overrides?.selectButton)
   };
 }
 function FindLocation({
@@ -1228,22 +1624,22 @@ function FindLocation({
   onSelect,
   itemClasses
 }) {
-  const [query, setQuery] = (0, import_react15.useState)("");
-  const [selected, setSelected] = (0, import_react15.useState)(
+  const [query, setQuery] = (0, import_react16.useState)("");
+  const [selected, setSelected] = (0, import_react16.useState)(
     () => initialSelected ?? null
   );
   const slots = mergeFindLocationItemClasses(itemClasses);
   const pinnedLocationId = initialSelected?.location_id;
-  const ranked = (0, import_react15.useMemo)(
+  const ranked = (0, import_react16.useMemo)(
     () => rankLocations(locations, query, pinnedLocationId),
     [locations, query, pinnedLocationId]
   );
   const trimmedQuery = query.trim();
   const noMatches = trimmedQuery.length > 0 && locations.every((location) => matchRank(location, trimmedQuery) === 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.baseContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: slots.searchContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Search, { className: slots.searchIcon, strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: slots.baseContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: slots.searchContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.Search, { className: slots.searchIcon, strokeWidth: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           type: "search",
@@ -1255,22 +1651,22 @@ function FindLocation({
         }
       )
     ] }),
-    noMatches && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: slots.noMatchesMessage, children: [
+    noMatches && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: slots.noMatchesMessage, children: [
       "No locations match \u201C",
       trimmedQuery,
       "\u201D. Showing all locations anyway."
     ] }),
-    ranked.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.emptyMessage, children: "No locations available." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: slots.list, children: ranked.map((location) => {
+    ranked.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: slots.emptyMessage, children: "No locations available." }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: slots.list, children: ranked.map((location) => {
       const isSelected = selected?.location_id === location.location_id;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "li",
         {
-          className: cn5(
+          className: cn6(
             slots.locationRow,
             isSelected ? slots.locationRowSelected : slots.locationRowUnselected
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "button",
               {
                 type: "button",
@@ -1278,12 +1674,12 @@ function FindLocation({
                 "aria-pressed": isSelected,
                 className: slots.locationButton,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.locationName, children: location.name }),
-                  location.address && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.locationAddress, children: location.address })
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: slots.locationName, children: location.name }),
+                  location.address && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: slots.locationAddress, children: location.address })
                 ]
               }
             ),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -1300,20 +1696,7 @@ function FindLocation({
   ] });
 }
 
-// src/components/CheckoutForm.tsx
-var import_react16 = require("react");
-var import_link4 = __toESM(require("next/link"));
-var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_lucide_react5 = require("lucide-react");
-var import_hooks4 = require("@zorgo/next");
-var import_Form = require("@zorgo/next");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function money4(cents) {
-  return `$${(cents / 100).toFixed(2)}`;
-}
-function cn6(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
+// src/components/client/CheckoutForm/classes.ts
 var CHECKOUT_FORM_DEFAULT_ITEM_CLASSES = {
   shell: "",
   shellInner: "max-w-2xl mx-auto w-full flex flex-col gap-6",
@@ -1366,522 +1749,198 @@ var CHECKOUT_FORM_DEFAULT_ITEM_CLASSES = {
 };
 function mergeCheckoutFormItemClasses(overrides) {
   const d3 = CHECKOUT_FORM_DEFAULT_ITEM_CLASSES;
-  return {
-    shell: cn6(d3.shell, overrides?.shell),
-    shellInner: cn6(d3.shellInner, overrides?.shellInner),
-    pageTitle: cn6(d3.pageTitle, overrides?.pageTitle),
-    primaryButton: cn6(d3.primaryButton, overrides?.primaryButton),
-    secondaryButton: cn6(d3.secondaryButton, overrides?.secondaryButton),
-    incrementButton: cn6(d3.incrementButton, overrides?.incrementButton),
-    surface: cn6(d3.surface, overrides?.surface),
-    fieldInput: cn6(d3.fieldInput, overrides?.fieldInput),
-    fieldContainer: cn6(d3.fieldContainer, overrides?.fieldContainer),
-    fieldLabel: cn6(d3.fieldLabel, overrides?.fieldLabel),
-    fieldError: cn6(d3.fieldError, overrides?.fieldError),
-    statusPanel: cn6(d3.statusPanel, overrides?.statusPanel),
-    statusTitle: cn6(d3.statusTitle, overrides?.statusTitle),
-    statusMessage: cn6(d3.statusMessage, overrides?.statusMessage),
-    statusMessageError: cn6(
-      d3.statusMessageError,
-      overrides?.statusMessageError
-    ),
-    statusActions: cn6(d3.statusActions, overrides?.statusActions),
-    stepSection: cn6(d3.stepSection, overrides?.stepSection),
-    sectionTitle: cn6(d3.sectionTitle, overrides?.sectionTitle),
-    cartList: cn6(d3.cartList, overrides?.cartList),
-    totals: cn6(d3.totals, overrides?.totals),
-    totalsRow: cn6(d3.totalsRow, overrides?.totalsRow),
-    totalsDivider: cn6(d3.totalsDivider, overrides?.totalsDivider),
-    totalsTotalRow: cn6(d3.totalsTotalRow, overrides?.totalsTotalRow),
-    form: cn6(d3.form, overrides?.form),
-    formActions: cn6(d3.formActions, overrides?.formActions),
-    submitError: cn6(d3.submitError, overrides?.submitError),
-    paymentSurface: cn6(d3.paymentSurface, overrides?.paymentSurface),
-    steps: cn6(d3.steps, overrides?.steps),
-    stepBadge: cn6(d3.stepBadge, overrides?.stepBadge),
-    stepBadgeActive: cn6(d3.stepBadgeActive, overrides?.stepBadgeActive),
-    stepBadgeInactive: cn6(
-      d3.stepBadgeInactive,
-      overrides?.stepBadgeInactive
-    ),
-    stepLabel: cn6(d3.stepLabel, overrides?.stepLabel),
-    stepLabelActive: cn6(d3.stepLabelActive, overrides?.stepLabelActive),
-    stepLabelInactive: cn6(
-      d3.stepLabelInactive,
-      overrides?.stepLabelInactive
-    ),
-    stepDivider: cn6(d3.stepDivider, overrides?.stepDivider),
-    stepDividerActive: cn6(
-      d3.stepDividerActive,
-      overrides?.stepDividerActive
-    ),
-    stepDividerInactive: cn6(
-      d3.stepDividerInactive,
-      overrides?.stepDividerInactive
-    ),
-    cartLine: cn6(d3.cartLine, overrides?.cartLine),
-    cartLineName: cn6(d3.cartLineName, overrides?.cartLineName),
-    cartLineSelection: cn6(
-      d3.cartLineSelection,
-      overrides?.cartLineSelection
-    ),
-    cartLinePrice: cn6(d3.cartLinePrice, overrides?.cartLinePrice),
-    cartLineControls: cn6(d3.cartLineControls, overrides?.cartLineControls),
-    cartLineQuantity: cn6(d3.cartLineQuantity, overrides?.cartLineQuantity),
-    promoApplied: cn6(d3.promoApplied, overrides?.promoApplied),
-    promoAppliedLabel: cn6(
-      d3.promoAppliedLabel,
-      overrides?.promoAppliedLabel
-    ),
-    promoRow: cn6(d3.promoRow, overrides?.promoRow),
-    promoInput: cn6(d3.promoInput, overrides?.promoInput),
-    promoError: cn6(d3.promoError, overrides?.promoError)
-  };
+  return Object.fromEntries(
+    Object.keys(d3).map((key) => [
+      key,
+      cn3(d3[key], overrides?.[key])
+    ])
+  );
 }
-function CheckoutForm({
-  itemClasses,
-  homeHref = "/",
-  menuHref = "/menu",
-  checkoutHref = "/checkout"
+var CHECKOUT_FORM_SLOTS = mergeCheckoutFormItemClasses();
+
+// src/components/client/CheckoutForm/CheckoutForm.tsx
+var import_react20 = require("react");
+var import_link4 = __toESM(require("next/link"));
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+var import_hooks9 = require("@zorgo/next");
+
+// src/components/client/CheckoutForm/CheckoutShell.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function CheckoutShell({
+  children,
+  title = "Checkout",
+  slots = CHECKOUT_FORM_SLOTS
 }) {
-  const slots = mergeCheckoutFormItemClasses(itemClasses);
-  const {
-    clientSecret,
-    stripe,
-    elementOptions,
-    isReady,
-    isLoading,
-    error,
-    getReturnStatus
-  } = (0, import_hooks4.usePayment)();
-  const { isEmpty, resetCart } = (0, import_hooks4.useCart)();
-  const { currentLocation, needsLocationSelection } = (0, import_hooks4.useLocation)({
-    promptLocationSelection: true
-  });
-  const { open } = (0, import_hooks4.useModal)();
-  const [returnStatus, setReturnStatus] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
-    if (window.location.search.includes("redirect_status")) {
-      const status = getReturnStatus(window.location.href);
-      setReturnStatus(status);
-      if (status.succeeded) resetCart();
-    }
-  }, []);
-  if (returnStatus) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: returnStatus.succeeded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StatusPanel,
-      {
-        slots,
-        title: "You're all set",
-        message: "Payment successful. Thank you!",
-        action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_link4.default,
-          {
-            href: homeHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
-            ),
-            children: "Back home"
-          }
-        )
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StatusPanel,
-      {
-        slots,
-        title: "Payment didn't go through",
-        message: returnStatus.error,
-        tone: "error",
-        action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_link4.default,
-          {
-            href: checkoutHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
-            ),
-            children: "Try again"
-          }
-        )
-      }
-    ) });
-  }
-  if (isEmpty && !isLoading && !clientSecret) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StatusPanel,
-      {
-        slots,
-        title: "Your cart is empty",
-        message: "Add something from the menu to get started.",
-        action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_link4.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: slots.shell, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: slots.shellInner, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { className: slots.pageTitle, children: title }),
+    children
+  ] }) });
+}
+
+// src/components/client/CheckoutForm/DetailsStep.tsx
+var import_react18 = require("react");
+var import_Form3 = require("@zorgo/next");
+var import_hooks7 = require("@zorgo/next");
+
+// src/components/client/CheckoutForm/CheckoutSteps.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function CheckoutSteps({
+  current,
+  labels = ["Your details", "Payment"],
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: slots.steps, children: labels.map((label, i4) => {
+    const n3 = i4 + 1;
+    const active = n3 <= current;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "contents", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
           {
-            href: menuHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
+            className: cn3(
+              slots.stepBadge,
+              active ? slots.stepBadgeActive : slots.stepBadgeInactive
             ),
-            children: "Browse the menu"
+            children: n3
           }
-        )
-      }
-    ) });
-  }
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StatusPanel,
-      {
-        slots,
-        title: "Something went wrong",
-        message: error,
-        tone: "error",
-        action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_link4.default,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "p",
           {
-            href: menuHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
+            className: cn3(
+              slots.stepLabel,
+              active ? slots.stepLabelActive : slots.stepLabelInactive
             ),
-            children: "Back to menu"
-          }
-        )
-      }
-    ) });
-  }
-  if (needsLocationSelection) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StatusPanel,
-      {
-        slots,
-        title: "Choose a location",
-        message: "Please choose a location to continue checkout.",
-        action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => open("FIND_LOCATION_MODAL"),
-            className: cn6(slots.primaryButton, "w-full"),
-            children: "Select a location"
+            children: label
           }
         )
-      }
-    ) });
-  }
-  if (isReady && elementOptions) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_stripe_js.Elements,
-      {
-        stripe,
-        options: elementOptions,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaymentStep, { slots, checkoutHref })
-      },
-      currentLocation?.stripe_account_id
-    ) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Shell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DetailsStep, { slots }) });
+      ] }),
+      i4 < labels.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          className: cn3(
+            slots.stepDivider,
+            current > n3 ? slots.stepDividerActive : slots.stepDividerInactive
+          )
+        }
+      )
+    ] }, label);
+  }) });
 }
-function StatusPanel({
-  title,
-  message,
-  action,
-  tone = "default",
-  slots
+
+// src/components/client/CheckoutForm/ConsentFields.tsx
+var import_Form = require("@zorgo/next");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ConsentFields({
+  termsLabel = "I have read and agree to the terms of service.",
+  marketingLabel = "I consent to receive promotions via text and email.",
+  slots = CHECKOUT_FORM_SLOTS
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn6(slots.statusPanel, slots.surface), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: slots.statusTitle, children: title }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "p",
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_Form.CheckboxField,
       {
-        className: tone === "error" ? slots.statusMessageError : slots.statusMessage,
-        children: message
+        fieldId: "termsAccepted",
+        required: true,
+        requiredText: "You must agree to the terms of service to continue.",
+        fieldErrorClassName: slots.fieldError,
+        children: termsLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.statusActions, children: action })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Form.CheckboxField, { fieldId: "marketingConsent", required: false, children: marketingLabel })
   ] });
 }
-function DetailsStep({ slots }) {
-  const {
-    items,
-    subtotal,
-    discount,
-    tax,
-    serviceFee,
-    total,
-    removeItem,
-    resetCart
-  } = (0, import_hooks4.useCart)();
-  const { customer, setCustomer } = (0, import_hooks4.useCustomer)();
-  const { startCheckout } = (0, import_hooks4.usePayment)();
-  const [submitError, setSubmitError] = (0, import_react16.useState)();
-  const fieldContainerClass = slots.fieldContainer;
+
+// src/components/client/CheckoutForm/ContactFields.tsx
+var import_Form2 = require("@zorgo/next");
+var import_hooks3 = require("@zorgo/next");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ContactFields({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { customer } = (0, import_hooks3.useCustomer)();
   const fieldStyleProps = {
     fieldClassName: slots.fieldInput,
-    containerClassName: fieldContainerClass,
+    containerClassName: slots.fieldContainer,
     fieldLabelClassName: slots.fieldLabel,
     fieldErrorClassName: slots.fieldError
   };
-  const handleSubmit = async (values) => {
-    const filledCustomer = {
-      first_name: values.firstName,
-      last_name: values.lastName,
-      phone: values.phone,
-      email: values.email,
-      allow_marketing: values.marketingConsent
-    };
-    setCustomer(filledCustomer);
-    try {
-      await startCheckout();
-    } catch (err) {
-      setSubmitError(
-        err instanceof Error ? err.message : "Could not start payment."
-      );
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.stepSection, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Steps, { current: 1, slots }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: slots.sectionTitle, children: "Your order" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.cartList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      CartLine,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_Form2.NameFields,
       {
-        item,
-        index,
-        onRemove: () => removeItem(index),
-        slots
-      },
-      `${item.item_id}-${index}`
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn6(slots.totals, slots.surface), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Subtotal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: money4(subtotal) })
-      ] }),
-      discount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Discount" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: money4(-discount) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Tax" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: money4(tax) })
-      ] }),
-      serviceFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Service fee" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: serviceFee })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.totalsDivider }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.totalsTotalRow, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Total" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: money4(total) })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PromoCode, { slots }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: slots.sectionTitle, children: "Contact information" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Form.DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_Form.NameFields,
+        firstNameInitialValue: customer.first_name ?? "",
+        lastNameInitialValue: customer.last_name ?? "",
+        fieldClassName: slots.fieldInput,
+        fieldLabelClassName: slots.fieldLabel,
+        fieldErrorClassName: slots.fieldError,
+        childClassName: cn3(
+          slots.fieldContainer,
+          "md:flex-1 md:min-w-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col w-full gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_Form2.PhoneField,
         {
-          firstNameInitialValue: customer.first_name ?? "",
-          lastNameInitialValue: customer.last_name ?? "",
-          fieldClassName: slots.fieldInput,
-          fieldLabelClassName: slots.fieldLabel,
-          fieldErrorClassName: slots.fieldError,
-          childClassName: cn6(
-            fieldContainerClass,
-            "md:flex-1 md:min-w-0"
-          )
+          initialValue: customer.phone ?? "",
+          showError: false,
+          ...fieldStyleProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col w-full gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_Form.PhoneField,
-          {
-            initialValue: customer.phone ?? "",
-            showError: false,
-            ...fieldStyleProps
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Form.FieldError, { name: "phone", className: slots.fieldError })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col w-full gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_Form.EmailField,
-          {
-            initialValue: customer.email ?? "",
-            showError: false,
-            ...fieldStyleProps
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Form.FieldError, { name: "email", className: slots.fieldError })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_Form.CheckboxField,
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Form2.FieldError, { name: "phone", className: slots.fieldError })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col w-full gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_Form2.EmailField,
         {
-          fieldId: "termsAccepted",
-          required: true,
-          requiredText: "You must agree to the terms of service to continue.",
-          fieldErrorClassName: slots.fieldError,
-          children: "I have read and agree to the terms of service."
+          initialValue: customer.email ?? "",
+          showError: false,
+          ...fieldStyleProps
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Form.CheckboxField, { fieldId: "marketingConsent", required: false, children: "I consent to receive promotions via text and email." }),
-      submitError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.submitError, children: submitError }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.formActions, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: resetCart,
-            className: slots.secondaryButton,
-            children: "Clear cart"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_Form.SubmitButton,
-          {
-            label: "Continue to payment",
-            loadingLabel: "Setting up...",
-            className: cn6("flex-1", slots.primaryButton)
-          }
-        )
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Form2.FieldError, { name: "email", className: slots.fieldError })
     ] })
   ] });
 }
-function PaymentStep({
-  slots,
-  checkoutHref
-}) {
-  const stripe = (0, import_react_stripe_js.useStripe)();
-  const elements = (0, import_react_stripe_js.useElements)();
-  const {
-    total,
-    clientSecret,
-    submitPayment,
-    paymentElementOptions,
-    getReturnUrl,
-    resetCheckout
-  } = (0, import_hooks4.usePayment)();
-  const { customer } = (0, import_hooks4.useCustomer)();
-  const [submitError, setSubmitError] = (0, import_react16.useState)();
-  const handleSubmit = async () => {
-    if (!stripe || !elements || !clientSecret) return;
-    const { error } = await elements.submit();
-    if (error) {
-      setSubmitError(error.message ?? "Please check your card details.");
-      throw error;
-    }
-    const returnUrl = `${getReturnUrl()}${checkoutHref.startsWith("/") ? checkoutHref : `/${checkoutHref}`}`;
-    const result = await submitPayment(
-      stripe,
-      elements,
-      clientSecret,
-      returnUrl,
-      customer
-    );
-    if (!result.success) setSubmitError(result.error);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.stepSection, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Steps, { current: 2, slots }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Form.DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn6(slots.paymentSurface, slots.surface), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js.PaymentElement, { options: paymentElementOptions }) }),
-      submitError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.submitError, children: submitError }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.formActions, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: resetCheckout,
-            className: slots.secondaryButton,
-            children: "Back to order"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_Form.SubmitButton,
-          {
-            label: `Pay ${money4(total ?? 0)}`,
-            loadingLabel: "Processing...",
-            className: cn6("flex-1", slots.primaryButton)
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-function Steps({ current, slots }) {
-  const labels = ["Your details", "Payment"];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.steps, children: labels.map((label, i4) => {
-    const n3 = i4 + 1;
-    const active = n3 <= current;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "contents", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
-          {
-            className: cn6(
-              slots.stepBadge,
-              active ? slots.stepBadgeActive : slots.stepBadgeInactive
-            ),
-            children: n3
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "p",
-          {
-            className: cn6(
-              slots.stepLabel,
-              active ? slots.stepLabelActive : slots.stepLabelInactive
-            ),
-            children: label
-          }
-        )
-      ] }),
-      i4 < labels.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          className: cn6(
-            slots.stepDivider,
-            current > n3 ? slots.stepDividerActive : slots.stepDividerInactive
-          )
-        }
-      )
-    ] }, label);
-  }) });
-}
-function CartLine({
+
+// src/components/client/CheckoutForm/OrderLine.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_hooks4 = require("@zorgo/next");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function OrderLine({
   item,
   index,
   onRemove,
-  slots
+  slots = CHECKOUT_FORM_SLOTS
 }) {
   const { open } = (0, import_hooks4.useModal)();
   const { updateItem, getItemTotal } = (0, import_hooks4.useCart)();
   const setQuantity = (next) => next < 1 ? onRemove() : updateItem({ ...item, quantity: next }, index);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn6(slots.cartLine, slots.surface), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.cartLineName, children: item.name }),
-      (() => {
-        const added = (item.selections ?? []).flatMap((rs) => rs.selections.map((s5) => s5.name));
-        const removed = (item.components ?? []).filter((c6) => c6.quantity_servings === 0).map((c6) => c6.name);
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          added.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: slots.cartLineSelection, children: [
-            "Add ",
-            added.join(", ")
-          ] }),
-          removed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: slots.cartLineSelection, children: [
-            "Remove ",
-            removed.join(", ")
-          ] }),
-          item.comments && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: slots.cartLineSelection, children: [
-            "Comments: ",
-            item.comments
-          ] })
-        ] });
-      })(),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.cartLinePrice, children: money4(getItemTotal(item)) })
+  const added = (item.selections ?? []).flatMap(
+    (rs) => rs.selections.map((s5) => s5.name)
+  );
+  const removed = (item.components ?? []).filter((c6) => c6.quantity_servings === 0).map((c6) => c6.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn3(slots.cartLine, slots.surface), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: slots.cartLineName, children: item.name }),
+      added.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: slots.cartLineSelection, children: [
+        "Add ",
+        added.join(", ")
+      ] }),
+      removed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: slots.cartLineSelection, children: [
+        "Remove ",
+        removed.join(", ")
+      ] }),
+      item.comments && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: slots.cartLineSelection, children: [
+        "Comments: ",
+        item.comments
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: slots.cartLinePrice, children: money3(getItemTotal(item)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.cartLineControls, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: slots.cartLineControls, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           type: "button",
@@ -1892,41 +1951,96 @@ function CartLine({
             seed: item,
             editIndex: index
           }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Pencil, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Pencil, { className: "w-5 h-5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           type: "button",
           className: slots.incrementButton,
           onClick: () => setQuantity(item.quantity - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Minus, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Minus, { className: "w-5 h-5" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.cartLineQuantity, children: item.quantity }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: slots.cartLineQuantity, children: item.quantity }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "button",
         {
           type: "button",
           className: slots.incrementButton,
           onClick: () => setQuantity(item.quantity + 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react5.Plus, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Plus, { className: "w-5 h-5" })
         }
       )
     ] })
   ] });
 }
-function PromoCode({ slots }) {
-  const { promoCode, appliedPromo, applyPromo, removePromo, error, loading } = (0, import_hooks4.usePromotions)();
-  const [draft, setDraft] = (0, import_react16.useState)("");
+function OrderLines({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { items, removeItem } = (0, import_hooks4.useCart)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: slots.cartList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    OrderLine,
+    {
+      item,
+      index,
+      onRemove: () => removeItem(index),
+      slots
+    },
+    `${item.item_id}-${index}`
+  )) });
+}
+
+// src/components/client/CheckoutForm/OrderTotals.tsx
+var import_hooks5 = require("@zorgo/next");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function OrderTotals({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { subtotal, discount, tax, serviceFee, total } = (0, import_hooks5.useCart)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn3(slots.totals, slots.surface), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Subtotal" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: money3(subtotal) })
+    ] }),
+    discount > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Discount" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: money3(-discount) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Tax" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: money3(tax) })
+    ] }),
+    serviceFee > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Service fee" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: money3(serviceFee) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: slots.totalsDivider }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: slots.totalsTotalRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: money3(total) })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/PromoCode.tsx
+var import_react17 = require("react");
+var import_hooks6 = require("@zorgo/next");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function PromoCode({
+  placeholder = "Promo code",
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { promoCode, appliedPromo, applyPromo, removePromo, error, loading } = (0, import_hooks6.usePromotions)();
+  const [draft, setDraft] = (0, import_react17.useState)("");
   if (appliedPromo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn6(slots.promoApplied, slots.surface), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: slots.promoAppliedLabel, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn3(slots.promoApplied, slots.surface), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: slots.promoAppliedLabel, children: [
         appliedPromo.name,
         " applied"
       ] }),
-      promoCode && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      promoCode && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -1937,39 +2051,294 @@ function PromoCode({ slots }) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.promoRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: slots.promoRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "input",
         {
           value: draft,
           onChange: (e) => setDraft(e.target.value),
-          placeholder: "Promo code",
+          placeholder,
           className: slots.promoInput
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
           disabled: loading || !draft.trim(),
           onClick: () => applyPromo(draft),
-          className: cn6(slots.primaryButton, "shrink-0"),
+          className: cn3(slots.primaryButton, "shrink-0"),
           children: loading ? "Applying\u2026" : "Apply"
         }
       )
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: slots.promoError, children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: slots.promoError, children: error })
   ] });
 }
-function Shell({
-  children,
-  slots
+
+// src/components/client/CheckoutForm/DetailsStep.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function DetailsStep({
+  slots = CHECKOUT_FORM_SLOTS
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: slots.shell, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: slots.shellInner, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: slots.pageTitle, children: "Checkout" }),
-    children
-  ] }) });
+  const { resetCart } = (0, import_hooks7.useCart)();
+  const { setCustomer } = (0, import_hooks7.useCustomer)();
+  const { startCheckout } = (0, import_hooks7.usePayment)();
+  const [submitError, setSubmitError] = (0, import_react18.useState)();
+  const handleSubmit = async (values) => {
+    const filledCustomer = {
+      first_name: values.firstName,
+      last_name: values.lastName,
+      phone: values.phone,
+      email: values.email,
+      allow_marketing: values.marketingConsent
+    };
+    setCustomer(filledCustomer);
+    try {
+      await startCheckout();
+    } catch (err) {
+      setSubmitError(
+        err instanceof Error ? err.message : "Could not start payment."
+      );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: slots.stepSection, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CheckoutSteps, { current: 1, slots }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: slots.sectionTitle, children: "Your order" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(OrderLines, { slots }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(OrderTotals, { slots }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PromoCode, { slots }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: slots.sectionTitle, children: "Contact information" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_Form3.DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContactFields, { slots }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ConsentFields, { slots }),
+      submitError && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: slots.submitError, children: submitError }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: slots.formActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: resetCart,
+            className: slots.secondaryButton,
+            children: "Clear cart"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_Form3.SubmitButton,
+          {
+            label: "Continue to payment",
+            loadingLabel: "Setting up...",
+            className: cn3("flex-1", slots.primaryButton)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/PaymentStep.tsx
+var import_react19 = require("react");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_Form4 = require("@zorgo/next");
+var import_hooks8 = require("@zorgo/next");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function PaymentStep({
+  slots = CHECKOUT_FORM_SLOTS,
+  checkoutHref = "/checkout"
+}) {
+  const stripe = (0, import_react_stripe_js.useStripe)();
+  const elements = (0, import_react_stripe_js.useElements)();
+  const {
+    total,
+    clientSecret,
+    submitPayment,
+    paymentElementOptions,
+    getReturnUrl,
+    resetCheckout
+  } = (0, import_hooks8.usePayment)();
+  const { customer } = (0, import_hooks8.useCustomer)();
+  const [submitError, setSubmitError] = (0, import_react19.useState)();
+  const handleSubmit = async () => {
+    if (!stripe || !elements || !clientSecret) return;
+    const { error } = await elements.submit();
+    if (error) {
+      setSubmitError(error.message ?? "Please check your card details.");
+      throw error;
+    }
+    const returnUrl = `${getReturnUrl()}${checkoutHref.startsWith("/") ? checkoutHref : `/${checkoutHref}`}`;
+    const result = await submitPayment(
+      stripe,
+      elements,
+      clientSecret,
+      returnUrl,
+      customer
+    );
+    if (!result.success) setSubmitError(result.error);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: slots.stepSection, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckoutSteps, { current: 2, slots }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_Form4.DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn3(slots.paymentSurface, slots.surface), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_stripe_js.PaymentElement, { options: paymentElementOptions }) }),
+      submitError && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: slots.submitError, children: submitError }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: slots.formActions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: resetCheckout,
+            className: slots.secondaryButton,
+            children: "Back to order"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_Form4.SubmitButton,
+          {
+            label: `Pay ${money3(total ?? 0)}`,
+            loadingLabel: "Processing...",
+            className: cn3("flex-1", slots.primaryButton)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/StatusPanel.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function StatusPanel({
+  title,
+  message,
+  action,
+  tone = "default",
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn3(slots.statusPanel, slots.surface), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: slots.statusTitle, children: title }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "p",
+      {
+        className: tone === "error" ? slots.statusMessageError : slots.statusMessage,
+        children: message
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: slots.statusActions, children: action })
+  ] });
+}
+
+// src/components/client/CheckoutForm/CheckoutForm.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function CheckoutForm({
+  itemClasses,
+  homeHref = "/",
+  menuHref = "/menu",
+  checkoutHref = "/checkout"
+}) {
+  const slots = mergeCheckoutFormItemClasses(itemClasses);
+  const {
+    clientSecret,
+    stripe,
+    elementOptions,
+    isReady,
+    isLoading,
+    error,
+    getReturnStatus
+  } = (0, import_hooks9.usePayment)();
+  const { isEmpty, resetCart } = (0, import_hooks9.useCart)();
+  const { currentLocation, needsLocationSelection } = (0, import_hooks9.useLocation)({
+    promptLocationSelection: true
+  });
+  const { open } = (0, import_hooks9.useModal)();
+  const [returnStatus, setReturnStatus] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
+    if (window.location.search.includes("redirect_status")) {
+      const status = getReturnStatus(window.location.href);
+      setReturnStatus(status);
+      if (status.succeeded) resetCart();
+    }
+  }, []);
+  const linkAction = (href, label) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_link4.default,
+    {
+      href,
+      className: cn3(slots.primaryButton, "block w-full text-center"),
+      children: label
+    }
+  );
+  if (returnStatus) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: returnStatus.succeeded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      StatusPanel,
+      {
+        slots,
+        title: "You're all set",
+        message: "Payment successful. Thank you!",
+        action: linkAction(homeHref, "Back home")
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      StatusPanel,
+      {
+        slots,
+        title: "Payment didn't go through",
+        message: returnStatus.error,
+        tone: "error",
+        action: linkAction(checkoutHref, "Try again")
+      }
+    ) });
+  }
+  if (isEmpty && !isLoading && !clientSecret) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      StatusPanel,
+      {
+        slots,
+        title: "Your cart is empty",
+        message: "Add something from the menu to get started.",
+        action: linkAction(menuHref, "Browse the menu")
+      }
+    ) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      StatusPanel,
+      {
+        slots,
+        title: "Something went wrong",
+        message: error,
+        tone: "error",
+        action: linkAction(menuHref, "Back to menu")
+      }
+    ) });
+  }
+  if (needsLocationSelection) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      StatusPanel,
+      {
+        slots,
+        title: "Choose a location",
+        message: "Please choose a location to continue checkout.",
+        action: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => open("FIND_LOCATION_MODAL"),
+            className: cn3(slots.primaryButton, "w-full"),
+            children: "Select a location"
+          }
+        )
+      }
+    ) });
+  }
+  if (isReady && elementOptions) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      import_react_stripe_js2.Elements,
+      {
+        stripe,
+        options: elementOptions,
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PaymentStep, { slots, checkoutHref })
+      },
+      currentLocation?.stripe_account_id
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckoutShell, { slots, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DetailsStep, { slots }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1978,19 +2347,46 @@ function Shell({
   BREADCRUMBS_DEFAULT_ITEM_CLASSES,
   Breadcrumbs,
   CHECKOUT_FORM_DEFAULT_ITEM_CLASSES,
+  CHECKOUT_FORM_SLOTS,
+  CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES,
+  CLIENT_ITEM_FORM_SLOTS,
   CheckoutForm,
+  CheckoutShell,
+  CheckoutSteps,
+  ClientItemForm,
+  CommentsSection,
+  ComponentsSection,
+  ConsentFields,
+  ContactFields,
   CookieConsent,
+  DetailsStep,
   FIND_LOCATION_DEFAULT_ITEM_CLASSES,
   FindLocation,
   GRID_MENU_DEFAULT_ITEM_CLASSES,
   GridMenu,
   ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES,
+  ItemCustomizationClient,
   ItemCustomizationForm,
+  OptionButton,
+  OrderLine,
+  OrderLines,
+  OrderTotals,
+  PaymentStep,
+  PortionPicker,
+  PortionSection,
+  PromoCode,
+  QuantitySection,
+  RuleSection,
+  StatusPanel,
+  SubmitButton,
+  VariantSection,
   mergeAccordionMenuItemClasses,
   mergeBreadcrumbsItemClasses,
   mergeCheckoutFormItemClasses,
+  mergeClientItemFormItemClasses,
   mergeFindLocationItemClasses,
   mergeGridMenuItemClasses,
-  mergeItemCustomizationFormItemClasses
+  mergeItemCustomizationFormItemClasses,
+  money
 });
 //# sourceMappingURL=components.js.map