@zorgo/next 1.1.7 → 1.3.0

package/dist/components.mjs

@@ -1,6 +1,6 @@
 "use client";
 
-// src/components/CookieConsent.tsx
+// src/components/client/CookieConsent.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // ../../node_modules/@headlessui/react/dist/utils/env.js
@@ -495,7 +495,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
 import { useCustomer } from "@zorgo/next";
 import { jsx, jsxs } from "react/jsx-runtime";
 function CookieConsent() {
@@ -550,45 +550,19 @@ function CookieConsent() {
   );
 }
 
-// src/components/Breadcrumbs.tsx
+// src/components/client/GridMenu.tsx
+import Image from "next/image";
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsx2("nav", { "aria-label": "Breadcrumb", className: slots.baseContainer, children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { className: "flex flex-row items-center gap-2", children: [
-    index > 0 && /* @__PURE__ */ jsx2(ChevronRight, { className: slots.separator }),
-    item.href ? /* @__PURE__ */ jsx2(Link, { href: item.href, className: slots.crumbLink, children: item.label }) : /* @__PURE__ */ jsx2("span", { className: slots.crumbText, children: item.label })
-  ] }, `${item.label}-${index}`)) });
-}
-
-// src/components/GridMenu.tsx
-import Link2 from "next/link";
-import { useMenu } from "@zorgo/next";
 import { menuItemSlug } from "@zorgo/next/slugs";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function cn2(...parts) {
+import { menuImageUrl as menuImageUrl2 } from "@zorgo/next/images";
+
+// src/images.ts
+import { menuImageUrl } from "@zorgo/next/images";
+var ITEM_IMAGE_PREFIX = "/images/items/";
+
+// src/components/client/GridMenu.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function cn(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function money(cents) {
@@ -609,25 +583,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({
@@ -635,26 +609,25 @@ function GridMenu({
   categories,
   itemClasses
 }) {
-  const { getItemImageUrl } = useMenu();
   const slots = mergeGridMenuItemClasses(itemClasses);
-  return /* @__PURE__ */ jsx3("div", { className: slots.baseContainer, children: categories.map((category) => {
+  return /* @__PURE__ */ jsx2("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__ */ jsxs3(
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         className: slots.categoryContainer,
         children: [
-          /* @__PURE__ */ jsx3("h1", { className: slots.categoryTitle, children: category.name }),
-          /* @__PURE__ */ jsx3("div", { className: slots.itemCardContainer, children: itemsInCategory.map((item) => /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx2("h1", { className: slots.categoryTitle, children: category.name }),
+          /* @__PURE__ */ jsx2("div", { className: slots.itemCardContainer, children: itemsInCategory.map((item) => /* @__PURE__ */ jsx2(
             ItemCard,
             {
               item,
-              imageUrl: getItemImageUrl(item.image_path),
+              imageUrl: menuImageUrl2(item.images?.[0]),
               slots
             },
             item.base_item_id
@@ -672,40 +645,43 @@ function ItemCard({
 }) {
   const variant = item.variants[0];
   const onSale = variant?.display_price != null && variant.display_price < variant.price;
-  return /* @__PURE__ */ jsxs3(
-    Link2,
+  return /* @__PURE__ */ jsxs2(
+    Link,
     {
       href: `/menu/${menuItemSlug(item.name, item.base_item_id)}`,
       className: slots.itemCard,
       children: [
-        /* @__PURE__ */ jsx3("div", { className: slots.itemCardImage, children: imageUrl && // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsx3(
-          "img",
+        /* @__PURE__ */ jsx2("div", { className: slots.itemCardImage, children: imageUrl && /* @__PURE__ */ jsx2(
+          Image,
           {
             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__ */ jsxs3("div", { className: slots.itemCardTextContainer, children: [
-          /* @__PURE__ */ jsx3("p", { className: slots.itemCardName, children: item.name }),
-          variant && /* @__PURE__ */ jsx3(Fragment, { children: onSale ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx3("p", { className: slots.itemCardPrice, children: money(variant.display_price) }),
-            /* @__PURE__ */ jsx3("p", { className: slots.itemCardOldPrice, children: money(variant.price) })
-          ] }) : /* @__PURE__ */ jsx3("p", { className: slots.itemCardPrice, children: money(variant.price) }) })
+        /* @__PURE__ */ jsxs2("div", { className: slots.itemCardTextContainer, children: [
+          /* @__PURE__ */ jsx2("p", { className: slots.itemCardName, children: item.name }),
+          variant && /* @__PURE__ */ jsx2(Fragment, { children: onSale ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2("p", { className: slots.itemCardPrice, children: money(variant.display_price) }),
+            /* @__PURE__ */ jsx2("p", { className: slots.itemCardOldPrice, children: money(variant.price) })
+          ] }) : /* @__PURE__ */ jsx2("p", { className: slots.itemCardPrice, children: money(variant.price) }) })
         ] })
       ]
     }
   );
 }
 
-// src/components/AccordionMenu.tsx
-import Link3 from "next/link";
+// src/components/client/AccordionMenu.tsx
+import Link2 from "next/link";
 import { useState as useState3 } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { menuItemSlug as menuItemSlug2 } from "@zorgo/next/slugs";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function cn3(...parts) {
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function cn2(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function money2(cents) {
@@ -729,34 +705,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({
@@ -765,14 +741,14 @@ function AccordionMenu({
   itemClasses
 }) {
   const slots = mergeAccordionMenuItemClasses(itemClasses);
-  return /* @__PURE__ */ jsx4("div", { className: slots.baseContainer, children: categories.map((category) => {
+  return /* @__PURE__ */ jsx3("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__ */ jsx4(
+    return /* @__PURE__ */ jsx3(
       MenuCategory,
       {
         category,
@@ -789,27 +765,27 @@ function MenuCategory({
   slots
 }) {
   const [isExpanded, setIsExpanded] = useState3(false);
-  return /* @__PURE__ */ jsxs4("div", { className: slots.categoryContainer, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3("div", { className: slots.categoryContainer, children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
         onClick: () => setIsExpanded(!isExpanded),
         className: slots.categoryTrigger,
         children: [
-          /* @__PURE__ */ jsx4("h2", { className: slots.categoryTitle, children: category.name }),
-          isExpanded ? /* @__PURE__ */ jsx4(ChevronUp, { className: slots.categoryIndicator }) : /* @__PURE__ */ jsx4(ChevronDown, { className: slots.categoryIndicator })
+          /* @__PURE__ */ jsx3("h2", { className: slots.categoryTitle, children: category.name }),
+          isExpanded ? /* @__PURE__ */ jsx3(ChevronUp, { className: slots.categoryIndicator }) : /* @__PURE__ */ jsx3(ChevronDown, { className: slots.categoryIndicator })
         ]
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       "div",
       {
-        className: cn3(
+        className: cn2(
           isExpanded ? "flex" : "hidden",
           slots.itemsContainer
         ),
-        children: itemsInCategory.map((item) => /* @__PURE__ */ jsx4(
+        children: itemsInCategory.map((item) => /* @__PURE__ */ jsx3(
           ItemCard2,
           {
             item,
@@ -827,36 +803,33 @@ function ItemCard2({
 }) {
   const variant = item.variants[0];
   const onSale = variant?.display_price != null && variant.display_price < variant.price;
-  return /* @__PURE__ */ jsxs4(
-    Link3,
+  return /* @__PURE__ */ jsxs3(
+    Link2,
     {
       href: `/menu/${menuItemSlug2(item.name, item.base_item_id)}`,
       className: slots.itemCard,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: slots.itemCardTextContainer, children: [
-          /* @__PURE__ */ jsx4("p", { className: slots.itemCardName, children: item.name }),
-          item.description && /* @__PURE__ */ jsx4("p", { className: slots.itemCardDescription, children: item.description })
+        /* @__PURE__ */ jsxs3("div", { className: slots.itemCardTextContainer, children: [
+          /* @__PURE__ */ jsx3("p", { className: slots.itemCardName, children: item.name }),
+          item.description && /* @__PURE__ */ jsx3("p", { className: slots.itemCardDescription, children: item.description })
         ] }),
-        variant && /* @__PURE__ */ jsx4("div", { className: slots.itemCardPriceContainer, children: onSale ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsx4("p", { className: slots.itemCardPrice, children: money2(variant.display_price) }),
-          /* @__PURE__ */ jsx4("p", { className: slots.itemCardOldPrice, children: money2(variant.price) })
-        ] }) : /* @__PURE__ */ jsx4("p", { className: slots.itemCardPrice, children: money2(variant.price) }) })
+        variant && /* @__PURE__ */ jsx3("div", { className: slots.itemCardPriceContainer, children: onSale ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3("p", { className: slots.itemCardPrice, children: money2(variant.display_price) }),
+          /* @__PURE__ */ jsx3("p", { className: slots.itemCardOldPrice, children: money2(variant.price) })
+        ] }) : /* @__PURE__ */ jsx3("p", { className: slots.itemCardPrice, children: money2(variant.price) }) })
       ]
     }
   );
 }
 
-// src/components/ItemCustomizationForm.tsx
-import { Minus, Plus } from "lucide-react";
-import { useItemCustomization, useMenu as useMenu2 } from "@zorgo/next";
-import { jsx as jsx5, jsxs as jsxs5 } from "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",
@@ -874,57 +847,496 @@ 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
+import { useState as useState4 } from "react";
+import { useRouter } from "next/navigation";
+import { useItemCustomization, useMenu } from "@zorgo/next";
+
+// src/components/client/ItemForm/Breadcrumbs.tsx
+import Link3 from "next/link";
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "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__ */ jsx4("nav", { "aria-label": "Breadcrumb", className: slots.baseContainer, children: items.map((item, index) => /* @__PURE__ */ jsxs4("span", { className: "flex flex-row items-center gap-2", children: [
+    index > 0 && /* @__PURE__ */ jsx4(ChevronRight, { className: slots.separator }),
+    item.href ? /* @__PURE__ */ jsx4(Link3, { href: item.href, className: slots.crumbLink, children: item.label }) : /* @__PURE__ */ jsx4("span", { className: slots.crumbText, children: item.label })
+  ] }, `${item.label}-${index}`)) });
+}
+
+// src/components/client/ItemForm/CommentsSection.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function CommentsSection({
+  comments,
+  setComments,
+  title = "Comments",
+  placeholder = "Special instructions...",
+  rows = 2,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ jsx5(
+      "textarea",
+      {
+        value: comments,
+        onChange: (e) => setComments(e.target.value),
+        placeholder,
+        className: slots.commentsTextarea,
+        rows
+      }
+    )
+  ] });
+}
+
+// src/components/client/ItemForm/ComponentsSection.tsx
+import { portionLabel } from "@zorgo/next";
+
+// src/components/client/ItemForm/OptionButton.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function OptionButton({
+  label,
+  subtext,
+  selected,
+  onClick,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn3(
+        slots.optionButton,
+        selected ? slots.optionButtonSelected : slots.optionButtonUnselected
+      ),
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: slots.optionButtonLabel, children: label }),
+        subtext && /* @__PURE__ */ jsx6("span", { className: slots.optionButtonUpcharge, children: subtext })
+      ]
+    }
+  );
+}
+
+// src/components/client/ItemForm/ComponentsSection.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "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__ */ jsxs7("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsx7("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ jsx7("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__ */ jsx7(
+        OptionButton,
+        {
+          label: component.name,
+          subtext: removedElsewhere && scheme ? `No ${component.name.toLowerCase()} on ${rows.filter((c6) => c6.quantity_servings === 0).map(
+            (c6) => 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
+import {
+  divisionsFor,
+  portionLabel as portionLabel2,
+  radialSectionPath
+} from "@zorgo/next";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "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__ */ jsx8("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__ */ jsx8(
+      "path",
+      {
+        d: 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__ */ jsx8(
+    "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__ */ jsx8(
+          "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__ */ jsx8("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__ */ jsx8(
+      "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__ */ jsx8("div", { className: "flex flex-row flex-wrap gap-2", children: Array.from({ length: divisions }, (_, i4) => {
+    const index = i4 + 1;
+    return /* @__PURE__ */ jsx8(
+      "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: portionLabel2(`${index}/${divisions}`, scheme)
+      },
+      index
+    );
+  }) });
+}
+function PortionPicker({
+  scheme,
+  divisions,
+  active,
+  covered,
+  onSelect,
+  onDivisionsChange,
+  className
+}) {
+  const cuts = divisionsFor(scheme);
+  const shapeProps = { divisions, active, covered, onSelect };
+  return /* @__PURE__ */ jsxs8("div", { className: cn5("flex flex-col gap-4 items-center", className), children: [
+    cuts.length > 1 && /* @__PURE__ */ jsx8("div", { className: "flex flex-row gap-2", children: cuts.map((count) => /* @__PURE__ */ jsx8(
+      "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__ */ jsxs8(Fragment3, { children: [
+      scheme.geometry === "radial" && /* @__PURE__ */ jsx8(RadialPicker, { ...shapeProps }),
+      scheme.geometry === "grid" && /* @__PURE__ */ jsx8(GridPicker, { ...shapeProps }),
+      scheme.geometry === "linear" && /* @__PURE__ */ jsx8(LinearPicker, { ...shapeProps }),
+      scheme.geometry === "count" && /* @__PURE__ */ jsx8(CountPicker, { ...shapeProps, scheme })
+    ] }),
+    /* @__PURE__ */ jsx8("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 ${portionLabel2(`${active}/${divisions}`, scheme).toLowerCase()}` })
+  ] });
+}
+
+// src/components/client/ItemForm/PortionSection.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function PortionSection({
+  scheme,
+  divisions,
+  activeSection,
+  setActiveSection,
+  setDivisions,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsxs9("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsx9("h2", { className: slots.sectionTitle, children: scheme.name }),
+    /* @__PURE__ */ jsx9(
+      PortionPicker,
+      {
+        scheme,
+        divisions,
+        active: activeSection,
+        onSelect: setActiveSection,
+        onDivisionsChange: setDivisions
+      }
+    )
+  ] });
+}
+
+// src/components/client/ItemForm/QuantitySection.tsx
+import { Minus, Plus } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function QuantitySection({
+  quantity,
+  setQuantity,
+  title = "How many?",
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsx10("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ jsxs10("div", { className: slots.quantityRow, children: [
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: slots.incrementButton,
+          onClick: () => setQuantity((q2) => q2 - 1),
+          children: /* @__PURE__ */ jsx10(Minus, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx10("p", { className: slots.servingsValue, children: quantity }),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          className: slots.incrementButton,
+          onClick: () => setQuantity((q2) => q2 + 1),
+          children: /* @__PURE__ */ jsx10(Plus, { className: "h-4 w-4" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/client/ItemForm/RuleSection.tsx
+import { parsePortionKey, portionLabel as portionLabel3 } from "@zorgo/next";
+import { jsx as jsx11, jsxs as jsxs11 } from "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__ */ jsxs11("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsxs11("h2", { className: slots.sectionTitle, children: [
+      rule.group_name,
+      activeSection != null && !rule.portionable && /* @__PURE__ */ jsx11("span", { className: slots.portionHint, children: " \u2014 whole item only" })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: slots.optionsRow, children: rule.options.map((option) => /* @__PURE__ */ jsx11(
+      OptionButton,
+      {
+        label: option.name,
+        subtext: (
+          // where it sits beats what it costs — the price is
+          // already in the running total
+          option.portion && scheme ? portionLabel3(option.portion, scheme) : option.upcharge > 0 ? `+${money3(option.upcharge)}` : void 0
+        ),
+        selected: option.selected,
+        onClick: () => placeOption ? placeOption(
+          rule.rule_id,
+          parsePortionKey(option.key).baseKey,
+          portion,
+          rule.max
+        ) : option.toggle(),
+        slots
+      },
+      parsePortionKey(option.key).baseKey
+    )) }),
+    rule.message() && /* @__PURE__ */ jsx11("p", { className: slots.ruleError, children: rule.message() })
+  ] });
+}
+
+// src/components/client/ItemForm/SubmitButton.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function SubmitButton({
+  canSubmit,
+  unmetRule,
+  price,
+  salePrice,
+  isEditMode,
+  onSubmit,
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsx12(
+    "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
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function VariantSection({
+  variants,
+  variant,
+  setVariant,
+  title = "Variants",
+  slots = CLIENT_ITEM_FORM_SLOTS
+}) {
+  if (variants.length <= 1) return null;
+  return /* @__PURE__ */ jsxs12("div", { className: slots.section, children: [
+    /* @__PURE__ */ jsx13("h2", { className: slots.sectionTitle, children: title }),
+    /* @__PURE__ */ jsx13("div", { className: slots.optionsRow, children: variants.map((v2) => /* @__PURE__ */ jsx13(
+      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
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function ClientItemForm({
   baseItemId,
   seed,
   editIndex,
   itemClasses,
   onSubmitSuccess
 }) {
-  const slots = mergeItemCustomizationFormItemClasses(itemClasses);
+  const router = useRouter();
+  const slots = mergeClientItemFormItemClasses(itemClasses);
   const {
     item,
     variant,
@@ -942,17 +1354,21 @@ function ItemCustomizationForm({
     price,
     salePrice,
     isEditMode,
-    draft
+    draft,
+    portionScheme,
+    placeOption,
+    recutSelections
   } = useItemCustomization(baseItemId, seed, editIndex);
-  const { categories } = useMenu2();
+  const { categories } = useMenu();
+  const [cut, setCut] = useState4(1);
+  const [activeSection, setActiveSection] = useState4(null);
+  const divisions = portionScheme ? Math.min(Math.max(cut, portionScheme.min_divisions), portionScheme.max_divisions) : 1;
   if (!item) {
-    return /* @__PURE__ */ jsx5("div", { className: slots.notFound, children: "Item not found." });
+    return /* @__PURE__ */ jsx14("div", { className: slots.notFound, children: "Item not found." });
   }
-  const category = categories.find(
-    (c6) => c6.category_id === item.category_id
-  );
-  return /* @__PURE__ */ jsxs5("div", { className: slots.baseContainer, children: [
-    /* @__PURE__ */ jsx5(
+  const category = categories.find((c6) => c6.category_id === item.category_id);
+  return /* @__PURE__ */ jsxs13("div", { className: slots.baseContainer, children: [
+    /* @__PURE__ */ jsx14(
       Breadcrumbs,
       {
         items: [
@@ -962,141 +1378,98 @@ function ItemCustomizationForm({
         ]
       }
     ),
-    /* @__PURE__ */ jsx5("h1", { className: slots.title, children: item.name }),
-    item.description && /* @__PURE__ */ jsx5("p", { className: slots.description, children: item.description }),
-    variants.length > 1 && /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
-      /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: "Variants" }),
-      /* @__PURE__ */ jsx5("div", { className: slots.optionsRow, children: variants.map((v2) => /* @__PURE__ */ jsx5(
-        OptionButton,
-        {
-          label: v2.name,
-          subtext: money3(v2.price),
-          selected: v2.item_id === variant.item_id,
-          onClick: () => setVariant(v2),
-          slots
+    /* @__PURE__ */ jsx14("h1", { className: slots.title, children: item.name }),
+    item.description && /* @__PURE__ */ jsx14("p", { className: slots.description, children: item.description }),
+    /* @__PURE__ */ jsx14(
+      VariantSection,
+      {
+        variants,
+        variant,
+        setVariant,
+        slots
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      ComponentsSection,
+      {
+        variant,
+        draft,
+        setComponentServings,
+        activeSection,
+        divisions,
+        scheme: portionScheme,
+        slots
+      }
+    ),
+    portionScheme && /* @__PURE__ */ jsx14(
+      PortionSection,
+      {
+        scheme: portionScheme,
+        divisions,
+        activeSection,
+        setActiveSection,
+        setDivisions: (next) => {
+          recutSelections(next);
+          setCut(next);
+          setActiveSection(
+            (s5) => s5 != null && (next === 1 || s5 > next) ? null : s5
+          );
         },
-        v2.item_id
-      )) })
-    ] }),
-    (variant.components?.length ?? 0) > 0 && /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
-      /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: "Includes" }),
-      /* @__PURE__ */ jsx5("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__ */ jsx5(
-          OptionButton,
-          {
-            label: component.name,
-            selected,
-            onClick: () => setComponentServings(
-              component.id,
-              selected ? 0 : defaultServings
-            ),
-            slots
-          },
-          component.id
-        );
-      }) })
-    ] }),
-    ruleGroups.map((rule) => /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
-      /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: rule.group_name }),
-      /* @__PURE__ */ jsx5("div", { className: slots.optionsRow, children: rule.options.map((option) => /* @__PURE__ */ jsx5(
-        OptionButton,
-        {
-          label: option.name,
-          subtext: option.upcharge > 0 ? `+${money3(option.upcharge)}` : void 0,
-          selected: option.selected,
-          onClick: option.toggle,
-          slots
-        },
-        option.key
-      )) }),
-      rule.message() && /* @__PURE__ */ jsx5("p", { className: slots.ruleError, children: rule.message() })
-    ] }, rule.rule_id)),
-    /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
-      /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: "Comments" }),
-      /* @__PURE__ */ jsx5(
-        "textarea",
-        {
-          value: comments,
-          onChange: (e) => setComments(e.target.value),
-          placeholder: "Special instructions...",
-          className: slots.commentsTextarea,
-          rows: 2
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { className: slots.section, children: [
-      /* @__PURE__ */ jsx5("h2", { className: slots.sectionTitle, children: "How many?" }),
-      /* @__PURE__ */ jsxs5("div", { className: slots.quantityRow, children: [
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            className: slots.incrementButton,
-            onClick: () => setQuantity((q2) => Math.max(1, q2 - 1)),
-            children: /* @__PURE__ */ jsx5(Minus, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx5("p", { className: slots.servingsValue, children: quantity }),
-        /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            className: slots.incrementButton,
-            onClick: () => setQuantity((q2) => q2 + 1),
-            children: /* @__PURE__ */ jsx5(Plus, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx5(
-      "button",
+        slots
+      }
+    ),
+    ruleGroups.map((rule) => /* @__PURE__ */ jsx14(
+      RuleSection,
       {
-        type: "button",
-        disabled: !canSubmit,
-        onClick: () => {
+        rule,
+        activeSection,
+        divisions,
+        scheme: portionScheme,
+        placeOption,
+        slots
+      },
+      rule.rule_id
+    )),
+    /* @__PURE__ */ jsx14(
+      CommentsSection,
+      {
+        comments,
+        setComments,
+        slots
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      QuantitySection,
+      {
+        quantity,
+        setQuantity,
+        slots
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      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__ */ jsxs5(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn4(
-        slots.optionButton,
-        selected ? slots.optionButtonSelected : slots.optionButtonUnselected
-      ),
-      children: [
-        /* @__PURE__ */ jsx5("span", { className: slots.optionButtonLabel, children: label }),
-        subtext && /* @__PURE__ */ jsx5("span", { className: slots.optionButtonUpcharge, children: subtext })
-      ]
-    }
-  );
-}
 
-// src/components/FindLocation.tsx
-import { useMemo, useState as useState4 } from "react";
+// src/components/client/FindLocation.tsx
+import { useMemo, useState as useState5 } from "react";
 import { Search } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function cn5(...parts) {
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function cn6(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function searchableText(location) {
@@ -1147,26 +1520,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({
@@ -1175,8 +1548,8 @@ function FindLocation({
   onSelect,
   itemClasses
 }) {
-  const [query, setQuery] = useState4("");
-  const [selected, setSelected] = useState4(
+  const [query, setQuery] = useState5("");
+  const [selected, setSelected] = useState5(
     () => initialSelected ?? null
   );
   const slots = mergeFindLocationItemClasses(itemClasses);
@@ -1187,10 +1560,10 @@ function FindLocation({
   );
   const trimmedQuery = query.trim();
   const noMatches = trimmedQuery.length > 0 && locations.every((location) => matchRank(location, trimmedQuery) === 2);
-  return /* @__PURE__ */ jsxs6("div", { className: slots.baseContainer, children: [
-    /* @__PURE__ */ jsxs6("div", { className: slots.searchContainer, children: [
-      /* @__PURE__ */ jsx6(Search, { className: slots.searchIcon, strokeWidth: 2 }),
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs14("div", { className: slots.baseContainer, children: [
+    /* @__PURE__ */ jsxs14("div", { className: slots.searchContainer, children: [
+      /* @__PURE__ */ jsx15(Search, { className: slots.searchIcon, strokeWidth: 2 }),
+      /* @__PURE__ */ jsx15(
         "input",
         {
           type: "search",
@@ -1202,22 +1575,22 @@ function FindLocation({
         }
       )
     ] }),
-    noMatches && /* @__PURE__ */ jsxs6("p", { className: slots.noMatchesMessage, children: [
+    noMatches && /* @__PURE__ */ jsxs14("p", { className: slots.noMatchesMessage, children: [
       "No locations match \u201C",
       trimmedQuery,
       "\u201D. Showing all locations anyway."
     ] }),
-    ranked.length === 0 ? /* @__PURE__ */ jsx6("p", { className: slots.emptyMessage, children: "No locations available." }) : /* @__PURE__ */ jsx6("ul", { className: slots.list, children: ranked.map((location) => {
+    ranked.length === 0 ? /* @__PURE__ */ jsx15("p", { className: slots.emptyMessage, children: "No locations available." }) : /* @__PURE__ */ jsx15("ul", { className: slots.list, children: ranked.map((location) => {
       const isSelected = selected?.location_id === location.location_id;
-      return /* @__PURE__ */ jsxs6(
+      return /* @__PURE__ */ jsxs14(
         "li",
         {
-          className: cn5(
+          className: cn6(
             slots.locationRow,
             isSelected ? slots.locationRowSelected : slots.locationRowUnselected
           ),
           children: [
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs14(
               "button",
               {
                 type: "button",
@@ -1225,12 +1598,12 @@ function FindLocation({
                 "aria-pressed": isSelected,
                 className: slots.locationButton,
                 children: [
-                  /* @__PURE__ */ jsx6("p", { className: slots.locationName, children: location.name }),
-                  location.address && /* @__PURE__ */ jsx6("p", { className: slots.locationAddress, children: location.address })
+                  /* @__PURE__ */ jsx15("p", { className: slots.locationName, children: location.name }),
+                  location.address && /* @__PURE__ */ jsx15("p", { className: slots.locationAddress, children: location.address })
                 ]
               }
             ),
-            isSelected && /* @__PURE__ */ jsx6(
+            isSelected && /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -1247,40 +1620,7 @@ function FindLocation({
   ] });
 }
 
-// src/components/CheckoutForm.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
-import Link4 from "next/link";
-import {
-  Elements,
-  PaymentElement,
-  useElements,
-  useStripe
-} from "@stripe/react-stripe-js";
-import { Minus as Minus2, Pencil, Plus as Plus2 } from "lucide-react";
-import {
-  useCart,
-  useCustomer as useCustomer2,
-  useLocation,
-  useModal,
-  usePayment,
-  usePromotions
-} from "@zorgo/next";
-import {
-  DynamicFormShell,
-  NameFields,
-  PhoneField,
-  EmailField,
-  FieldError,
-  CheckboxField,
-  SubmitButton
-} from "@zorgo/next";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "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",
@@ -1333,522 +1673,208 @@ 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
+import { useEffect as useEffect3, useState as useState9 } from "react";
+import Link4 from "next/link";
+import { Elements } from "@stripe/react-stripe-js";
+import {
+  useCart as useCart4,
+  useLocation,
+  useModal as useModal2,
+  usePayment as usePayment3
+} from "@zorgo/next";
+
+// src/components/client/CheckoutForm/CheckoutShell.tsx
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function CheckoutShell({
+  children,
+  title = "Checkout",
+  slots = CHECKOUT_FORM_SLOTS
 }) {
-  const slots = mergeCheckoutFormItemClasses(itemClasses);
-  const {
-    clientSecret,
-    stripe,
-    elementOptions,
-    isReady,
-    isLoading,
-    error,
-    getReturnStatus
-  } = usePayment();
-  const { isEmpty, resetCart } = useCart();
-  const { currentLocation, needsLocationSelection } = useLocation({
-    promptLocationSelection: true
-  });
-  const { open } = useModal();
-  const [returnStatus, setReturnStatus] = useState5(null);
-  useEffect3(() => {
-    if (window.location.search.includes("redirect_status")) {
-      const status = getReturnStatus(window.location.href);
-      setReturnStatus(status);
-      if (status.succeeded) resetCart();
-    }
-  }, []);
-  if (returnStatus) {
-    return /* @__PURE__ */ jsx7(Shell, { slots, children: returnStatus.succeeded ? /* @__PURE__ */ jsx7(
-      StatusPanel,
-      {
-        slots,
-        title: "You're all set",
-        message: "Payment successful. Thank you!",
-        action: /* @__PURE__ */ jsx7(
-          Link4,
-          {
-            href: homeHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
-            ),
-            children: "Back home"
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsx7(
-      StatusPanel,
-      {
-        slots,
-        title: "Payment didn't go through",
-        message: returnStatus.error,
-        tone: "error",
-        action: /* @__PURE__ */ jsx7(
-          Link4,
-          {
-            href: checkoutHref,
-            className: cn6(
-              slots.primaryButton,
-              "block w-full text-center"
-            ),
-            children: "Try again"
-          }
-        )
-      }
-    ) });
-  }
-  if (isEmpty && !isLoading && !clientSecret) {
-    return /* @__PURE__ */ jsx7(Shell, { slots, children: /* @__PURE__ */ jsx7(
-      StatusPanel,
-      {
-        slots,
-        title: "Your cart is empty",
-        message: "Add something from the menu to get started.",
-        action: /* @__PURE__ */ jsx7(
-          Link4,
+  return /* @__PURE__ */ jsx16("div", { className: slots.shell, children: /* @__PURE__ */ jsxs15("div", { className: slots.shellInner, children: [
+    /* @__PURE__ */ jsx16("h1", { className: slots.pageTitle, children: title }),
+    children
+  ] }) });
+}
+
+// src/components/client/CheckoutForm/DetailsStep.tsx
+import { useState as useState7 } from "react";
+import { DynamicFormShell, SubmitButton as SubmitButton2 } from "@zorgo/next";
+import { useCart as useCart3, useCustomer as useCustomer3, usePayment } from "@zorgo/next";
+
+// src/components/client/CheckoutForm/CheckoutSteps.tsx
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function CheckoutSteps({
+  current,
+  labels = ["Your details", "Payment"],
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsx17("div", { className: slots.steps, children: labels.map((label, i4) => {
+    const n3 = i4 + 1;
+    const active = n3 <= current;
+    return /* @__PURE__ */ jsxs16("div", { className: "contents", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx17(
+          "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__ */ jsx7(Shell, { slots, children: /* @__PURE__ */ jsx7(
-      StatusPanel,
-      {
-        slots,
-        title: "Something went wrong",
-        message: error,
-        tone: "error",
-        action: /* @__PURE__ */ jsx7(
-          Link4,
+        ),
+        /* @__PURE__ */ jsx17(
+          "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__ */ jsx7(Shell, { slots, children: /* @__PURE__ */ jsx7(
-      StatusPanel,
-      {
-        slots,
-        title: "Choose a location",
-        message: "Please choose a location to continue checkout.",
-        action: /* @__PURE__ */ jsx7(
-          "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__ */ jsx7(Shell, { slots, children: /* @__PURE__ */ jsx7(
-      Elements,
-      {
-        stripe,
-        options: elementOptions,
-        children: /* @__PURE__ */ jsx7(PaymentStep, { slots, checkoutHref })
-      },
-      currentLocation?.stripe_account_id
-    ) });
-  }
-  return /* @__PURE__ */ jsx7(Shell, { slots, children: /* @__PURE__ */ jsx7(DetailsStep, { slots }) });
+      ] }),
+      i4 < labels.length - 1 && /* @__PURE__ */ jsx17(
+        "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
+import { CheckboxField } from "@zorgo/next";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs17 } from "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__ */ jsxs7("div", { className: cn6(slots.statusPanel, slots.surface), children: [
-    /* @__PURE__ */ jsx7("h2", { className: slots.statusTitle, children: title }),
-    message && /* @__PURE__ */ jsx7(
-      "p",
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx18(
+      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__ */ jsx7("div", { className: slots.statusActions, children: action })
+    /* @__PURE__ */ jsx18(CheckboxField, { fieldId: "marketingConsent", required: false, children: marketingLabel })
   ] });
 }
-function DetailsStep({ slots }) {
-  const {
-    items,
-    subtotal,
-    discount,
-    tax,
-    serviceFee,
-    total,
-    removeItem,
-    resetCart
-  } = useCart();
-  const { customer, setCustomer } = useCustomer2();
-  const { startCheckout } = usePayment();
-  const [submitError, setSubmitError] = useState5();
-  const fieldContainerClass = slots.fieldContainer;
+
+// src/components/client/CheckoutForm/ContactFields.tsx
+import {
+  NameFields,
+  PhoneField,
+  EmailField,
+  FieldError
+} from "@zorgo/next";
+import { useCustomer as useCustomer2 } from "@zorgo/next";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function ContactFields({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { customer } = useCustomer2();
   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__ */ jsxs7("div", { className: slots.stepSection, children: [
-    /* @__PURE__ */ jsx7(Steps, { current: 1, slots }),
-    /* @__PURE__ */ jsx7("h2", { className: slots.sectionTitle, children: "Your order" }),
-    /* @__PURE__ */ jsx7("div", { className: slots.cartList, children: items.map((item, index) => /* @__PURE__ */ jsx7(
-      CartLine,
+  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+    /* @__PURE__ */ jsx19(
+      NameFields,
       {
-        item,
-        index,
-        onRemove: () => removeItem(index),
-        slots
-      },
-      `${item.item_id}-${index}`
-    )) }),
-    /* @__PURE__ */ jsxs7("div", { className: cn6(slots.totals, slots.surface), children: [
-      /* @__PURE__ */ jsxs7("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ jsx7("span", { children: "Subtotal" }),
-        /* @__PURE__ */ jsx7("span", { children: money4(subtotal) })
-      ] }),
-      discount > 0 && /* @__PURE__ */ jsxs7("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ jsx7("span", { children: "Discount" }),
-        /* @__PURE__ */ jsx7("span", { children: money4(-discount) })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ jsx7("span", { children: "Tax" }),
-        /* @__PURE__ */ jsx7("span", { children: money4(tax) })
-      ] }),
-      serviceFee > 0 && /* @__PURE__ */ jsxs7("div", { className: slots.totalsRow, children: [
-        /* @__PURE__ */ jsx7("span", { children: "Service fee" }),
-        /* @__PURE__ */ jsx7("span", { children: serviceFee })
-      ] }),
-      /* @__PURE__ */ jsx7("div", { className: slots.totalsDivider }),
-      /* @__PURE__ */ jsxs7("div", { className: slots.totalsTotalRow, children: [
-        /* @__PURE__ */ jsx7("span", { children: "Total" }),
-        /* @__PURE__ */ jsx7("span", { children: money4(total) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx7(PromoCode, { slots }),
-    /* @__PURE__ */ jsx7("h2", { className: slots.sectionTitle, children: "Contact information" }),
-    /* @__PURE__ */ jsxs7(DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
-      /* @__PURE__ */ jsx7(
-        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__ */ jsxs18("div", { className: "flex flex-col w-full gap-1", children: [
+      /* @__PURE__ */ jsx19(
+        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__ */ jsxs7("div", { className: "flex flex-col w-full gap-1", children: [
-        /* @__PURE__ */ jsx7(
-          PhoneField,
-          {
-            initialValue: customer.phone ?? "",
-            showError: false,
-            ...fieldStyleProps
-          }
-        ),
-        /* @__PURE__ */ jsx7(FieldError, { name: "phone", className: slots.fieldError })
-      ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col w-full gap-1", children: [
-        /* @__PURE__ */ jsx7(
-          EmailField,
-          {
-            initialValue: customer.email ?? "",
-            showError: false,
-            ...fieldStyleProps
-          }
-        ),
-        /* @__PURE__ */ jsx7(FieldError, { name: "email", className: slots.fieldError })
-      ] }),
-      /* @__PURE__ */ jsx7(
-        CheckboxField,
+      /* @__PURE__ */ jsx19(FieldError, { name: "phone", className: slots.fieldError })
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { className: "flex flex-col w-full gap-1", children: [
+      /* @__PURE__ */ jsx19(
+        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__ */ jsx7(CheckboxField, { fieldId: "marketingConsent", required: false, children: "I consent to receive promotions via text and email." }),
-      submitError && /* @__PURE__ */ jsx7("p", { className: slots.submitError, children: submitError }),
-      /* @__PURE__ */ jsxs7("div", { className: slots.formActions, children: [
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: resetCart,
-            className: slots.secondaryButton,
-            children: "Clear cart"
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          SubmitButton,
-          {
-            label: "Continue to payment",
-            loadingLabel: "Setting up...",
-            className: cn6("flex-1", slots.primaryButton)
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-function PaymentStep({
-  slots,
-  checkoutHref
-}) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const {
-    total,
-    clientSecret,
-    submitPayment,
-    paymentElementOptions,
-    getReturnUrl,
-    resetCheckout
-  } = usePayment();
-  const { customer } = useCustomer2();
-  const [submitError, setSubmitError] = useState5();
-  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__ */ jsxs7("div", { className: slots.stepSection, children: [
-    /* @__PURE__ */ jsx7(Steps, { current: 2, slots }),
-    /* @__PURE__ */ jsxs7(DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
-      /* @__PURE__ */ jsx7("div", { className: cn6(slots.paymentSurface, slots.surface), children: /* @__PURE__ */ jsx7(PaymentElement, { options: paymentElementOptions }) }),
-      submitError && /* @__PURE__ */ jsx7("p", { className: slots.submitError, children: submitError }),
-      /* @__PURE__ */ jsxs7("div", { className: slots.formActions, children: [
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            onClick: resetCheckout,
-            className: slots.secondaryButton,
-            children: "Back to order"
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          SubmitButton,
-          {
-            label: `Pay ${money4(total ?? 0)}`,
-            loadingLabel: "Processing...",
-            className: cn6("flex-1", slots.primaryButton)
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx19(FieldError, { name: "email", className: slots.fieldError })
     ] })
   ] });
 }
-function Steps({ current, slots }) {
-  const labels = ["Your details", "Payment"];
-  return /* @__PURE__ */ jsx7("div", { className: slots.steps, children: labels.map((label, i4) => {
-    const n3 = i4 + 1;
-    const active = n3 <= current;
-    return /* @__PURE__ */ jsxs7("div", { className: "contents", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7(
-          "div",
-          {
-            className: cn6(
-              slots.stepBadge,
-              active ? slots.stepBadgeActive : slots.stepBadgeInactive
-            ),
-            children: n3
-          }
-        ),
-        /* @__PURE__ */ jsx7(
-          "p",
-          {
-            className: cn6(
-              slots.stepLabel,
-              active ? slots.stepLabelActive : slots.stepLabelInactive
-            ),
-            children: label
-          }
-        )
-      ] }),
-      i4 < labels.length - 1 && /* @__PURE__ */ jsx7(
-        "div",
-        {
-          className: cn6(
-            slots.stepDivider,
-            current > n3 ? slots.stepDividerActive : slots.stepDividerInactive
-          )
-        }
-      )
-    ] }, label);
-  }) });
-}
-function CartLine({
+
+// src/components/client/CheckoutForm/OrderLine.tsx
+import { Minus as Minus2, Pencil, Plus as Plus2 } from "lucide-react";
+import { useCart, useModal } from "@zorgo/next";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+function OrderLine({
   item,
   index,
   onRemove,
-  slots
+  slots = CHECKOUT_FORM_SLOTS
 }) {
   const { open } = useModal();
   const { updateItem, getItemTotal } = useCart();
   const setQuantity = (next) => next < 1 ? onRemove() : updateItem({ ...item, quantity: next }, index);
-  return /* @__PURE__ */ jsxs7("div", { className: cn6(slots.cartLine, slots.surface), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx7("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__ */ jsxs7(Fragment3, { children: [
-          added.length > 0 && /* @__PURE__ */ jsxs7("p", { className: slots.cartLineSelection, children: [
-            "Add ",
-            added.join(", ")
-          ] }),
-          removed.length > 0 && /* @__PURE__ */ jsxs7("p", { className: slots.cartLineSelection, children: [
-            "Remove ",
-            removed.join(", ")
-          ] }),
-          item.comments && /* @__PURE__ */ jsxs7("p", { className: slots.cartLineSelection, children: [
-            "Comments: ",
-            item.comments
-          ] })
-        ] });
-      })(),
-      /* @__PURE__ */ jsx7("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__ */ jsxs19("div", { className: cn3(slots.cartLine, slots.surface), children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1 flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx20("p", { className: slots.cartLineName, children: item.name }),
+      added.length > 0 && /* @__PURE__ */ jsxs19("p", { className: slots.cartLineSelection, children: [
+        "Add ",
+        added.join(", ")
+      ] }),
+      removed.length > 0 && /* @__PURE__ */ jsxs19("p", { className: slots.cartLineSelection, children: [
+        "Remove ",
+        removed.join(", ")
+      ] }),
+      item.comments && /* @__PURE__ */ jsxs19("p", { className: slots.cartLineSelection, children: [
+        "Comments: ",
+        item.comments
+      ] }),
+      /* @__PURE__ */ jsx20("p", { className: slots.cartLinePrice, children: money3(getItemTotal(item)) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: slots.cartLineControls, children: [
-      /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs19("div", { className: slots.cartLineControls, children: [
+      /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
@@ -1859,41 +1885,96 @@ function CartLine({
             seed: item,
             editIndex: index
           }),
-          children: /* @__PURE__ */ jsx7(Pencil, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx20(Pencil, { className: "w-5 h-5" })
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
           className: slots.incrementButton,
           onClick: () => setQuantity(item.quantity - 1),
-          children: /* @__PURE__ */ jsx7(Minus2, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx20(Minus2, { className: "w-5 h-5" })
         }
       ),
-      /* @__PURE__ */ jsx7("p", { className: slots.cartLineQuantity, children: item.quantity }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx20("p", { className: slots.cartLineQuantity, children: item.quantity }),
+      /* @__PURE__ */ jsx20(
         "button",
         {
           type: "button",
           className: slots.incrementButton,
           onClick: () => setQuantity(item.quantity + 1),
-          children: /* @__PURE__ */ jsx7(Plus2, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx20(Plus2, { className: "w-5 h-5" })
         }
       )
     ] })
   ] });
 }
-function PromoCode({ slots }) {
+function OrderLines({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { items, removeItem } = useCart();
+  return /* @__PURE__ */ jsx20("div", { className: slots.cartList, children: items.map((item, index) => /* @__PURE__ */ jsx20(
+    OrderLine,
+    {
+      item,
+      index,
+      onRemove: () => removeItem(index),
+      slots
+    },
+    `${item.item_id}-${index}`
+  )) });
+}
+
+// src/components/client/CheckoutForm/OrderTotals.tsx
+import { useCart as useCart2 } from "@zorgo/next";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+function OrderTotals({
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  const { subtotal, discount, tax, serviceFee, total } = useCart2();
+  return /* @__PURE__ */ jsxs20("div", { className: cn3(slots.totals, slots.surface), children: [
+    /* @__PURE__ */ jsxs20("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ jsx21("span", { children: "Subtotal" }),
+      /* @__PURE__ */ jsx21("span", { children: money3(subtotal) })
+    ] }),
+    discount > 0 && /* @__PURE__ */ jsxs20("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ jsx21("span", { children: "Discount" }),
+      /* @__PURE__ */ jsx21("span", { children: money3(-discount) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ jsx21("span", { children: "Tax" }),
+      /* @__PURE__ */ jsx21("span", { children: money3(tax) })
+    ] }),
+    serviceFee > 0 && /* @__PURE__ */ jsxs20("div", { className: slots.totalsRow, children: [
+      /* @__PURE__ */ jsx21("span", { children: "Service fee" }),
+      /* @__PURE__ */ jsx21("span", { children: money3(serviceFee) })
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: slots.totalsDivider }),
+    /* @__PURE__ */ jsxs20("div", { className: slots.totalsTotalRow, children: [
+      /* @__PURE__ */ jsx21("span", { children: "Total" }),
+      /* @__PURE__ */ jsx21("span", { children: money3(total) })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/PromoCode.tsx
+import { useState as useState6 } from "react";
+import { usePromotions } from "@zorgo/next";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function PromoCode({
+  placeholder = "Promo code",
+  slots = CHECKOUT_FORM_SLOTS
+}) {
   const { promoCode, appliedPromo, applyPromo, removePromo, error, loading } = usePromotions();
-  const [draft, setDraft] = useState5("");
+  const [draft, setDraft] = useState6("");
   if (appliedPromo) {
-    return /* @__PURE__ */ jsxs7("div", { className: cn6(slots.promoApplied, slots.surface), children: [
-      /* @__PURE__ */ jsxs7("span", { className: slots.promoAppliedLabel, children: [
+    return /* @__PURE__ */ jsxs21("div", { className: cn3(slots.promoApplied, slots.surface), children: [
+      /* @__PURE__ */ jsxs21("span", { className: slots.promoAppliedLabel, children: [
         appliedPromo.name,
         " applied"
       ] }),
-      promoCode && /* @__PURE__ */ jsx7(
+      promoCode && /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -1904,39 +1985,294 @@ function PromoCode({ slots }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2 w-full", children: [
-    /* @__PURE__ */ jsxs7("div", { className: slots.promoRow, children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2 w-full", children: [
+    /* @__PURE__ */ jsxs21("div", { className: slots.promoRow, children: [
+      /* @__PURE__ */ jsx22(
         "input",
         {
           value: draft,
           onChange: (e) => setDraft(e.target.value),
-          placeholder: "Promo code",
+          placeholder,
           className: slots.promoInput
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx22(
         "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__ */ jsx7("p", { className: slots.promoError, children: error })
+    error && /* @__PURE__ */ jsx22("p", { className: slots.promoError, children: error })
   ] });
 }
-function Shell({
-  children,
-  slots
+
+// src/components/client/CheckoutForm/DetailsStep.tsx
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+function DetailsStep({
+  slots = CHECKOUT_FORM_SLOTS
 }) {
-  return /* @__PURE__ */ jsx7("div", { className: slots.shell, children: /* @__PURE__ */ jsxs7("div", { className: slots.shellInner, children: [
-    /* @__PURE__ */ jsx7("h1", { className: slots.pageTitle, children: "Checkout" }),
-    children
-  ] }) });
+  const { resetCart } = useCart3();
+  const { setCustomer } = useCustomer3();
+  const { startCheckout } = usePayment();
+  const [submitError, setSubmitError] = useState7();
+  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__ */ jsxs22("div", { className: slots.stepSection, children: [
+    /* @__PURE__ */ jsx23(CheckoutSteps, { current: 1, slots }),
+    /* @__PURE__ */ jsx23("h2", { className: slots.sectionTitle, children: "Your order" }),
+    /* @__PURE__ */ jsx23(OrderLines, { slots }),
+    /* @__PURE__ */ jsx23(OrderTotals, { slots }),
+    /* @__PURE__ */ jsx23(PromoCode, { slots }),
+    /* @__PURE__ */ jsx23("h2", { className: slots.sectionTitle, children: "Contact information" }),
+    /* @__PURE__ */ jsxs22(DynamicFormShell, { onSubmit: handleSubmit, className: slots.form, children: [
+      /* @__PURE__ */ jsx23(ContactFields, { slots }),
+      /* @__PURE__ */ jsx23(ConsentFields, { slots }),
+      submitError && /* @__PURE__ */ jsx23("p", { className: slots.submitError, children: submitError }),
+      /* @__PURE__ */ jsxs22("div", { className: slots.formActions, children: [
+        /* @__PURE__ */ jsx23(
+          "button",
+          {
+            type: "button",
+            onClick: resetCart,
+            className: slots.secondaryButton,
+            children: "Clear cart"
+          }
+        ),
+        /* @__PURE__ */ jsx23(
+          SubmitButton2,
+          {
+            label: "Continue to payment",
+            loadingLabel: "Setting up...",
+            className: cn3("flex-1", slots.primaryButton)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/PaymentStep.tsx
+import { useState as useState8 } from "react";
+import { PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { DynamicFormShell as DynamicFormShell2, SubmitButton as SubmitButton3 } from "@zorgo/next";
+import { useCustomer as useCustomer4, usePayment as usePayment2 } from "@zorgo/next";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+function PaymentStep({
+  slots = CHECKOUT_FORM_SLOTS,
+  checkoutHref = "/checkout"
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+  const {
+    total,
+    clientSecret,
+    submitPayment,
+    paymentElementOptions,
+    getReturnUrl,
+    resetCheckout
+  } = usePayment2();
+  const { customer } = useCustomer4();
+  const [submitError, setSubmitError] = useState8();
+  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__ */ jsxs23("div", { className: slots.stepSection, children: [
+    /* @__PURE__ */ jsx24(CheckoutSteps, { current: 2, slots }),
+    /* @__PURE__ */ jsxs23(DynamicFormShell2, { onSubmit: handleSubmit, className: slots.form, children: [
+      /* @__PURE__ */ jsx24("div", { className: cn3(slots.paymentSurface, slots.surface), children: /* @__PURE__ */ jsx24(PaymentElement, { options: paymentElementOptions }) }),
+      submitError && /* @__PURE__ */ jsx24("p", { className: slots.submitError, children: submitError }),
+      /* @__PURE__ */ jsxs23("div", { className: slots.formActions, children: [
+        /* @__PURE__ */ jsx24(
+          "button",
+          {
+            type: "button",
+            onClick: resetCheckout,
+            className: slots.secondaryButton,
+            children: "Back to order"
+          }
+        ),
+        /* @__PURE__ */ jsx24(
+          SubmitButton3,
+          {
+            label: `Pay ${money3(total ?? 0)}`,
+            loadingLabel: "Processing...",
+            className: cn3("flex-1", slots.primaryButton)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/client/CheckoutForm/StatusPanel.tsx
+import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+function StatusPanel({
+  title,
+  message,
+  action,
+  tone = "default",
+  slots = CHECKOUT_FORM_SLOTS
+}) {
+  return /* @__PURE__ */ jsxs24("div", { className: cn3(slots.statusPanel, slots.surface), children: [
+    /* @__PURE__ */ jsx25("h2", { className: slots.statusTitle, children: title }),
+    message && /* @__PURE__ */ jsx25(
+      "p",
+      {
+        className: tone === "error" ? slots.statusMessageError : slots.statusMessage,
+        children: message
+      }
+    ),
+    /* @__PURE__ */ jsx25("div", { className: slots.statusActions, children: action })
+  ] });
+}
+
+// src/components/client/CheckoutForm/CheckoutForm.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function CheckoutForm({
+  itemClasses,
+  homeHref = "/",
+  menuHref = "/menu",
+  checkoutHref = "/checkout"
+}) {
+  const slots = mergeCheckoutFormItemClasses(itemClasses);
+  const {
+    clientSecret,
+    stripe,
+    elementOptions,
+    isReady,
+    isLoading,
+    error,
+    getReturnStatus
+  } = usePayment3();
+  const { isEmpty, resetCart } = useCart4();
+  const { currentLocation, needsLocationSelection } = useLocation({
+    promptLocationSelection: true
+  });
+  const { open } = useModal2();
+  const [returnStatus, setReturnStatus] = useState9(null);
+  useEffect3(() => {
+    if (window.location.search.includes("redirect_status")) {
+      const status = getReturnStatus(window.location.href);
+      setReturnStatus(status);
+      if (status.succeeded) resetCart();
+    }
+  }, []);
+  const linkAction = (href, label) => /* @__PURE__ */ jsx26(
+    Link4,
+    {
+      href,
+      className: cn3(slots.primaryButton, "block w-full text-center"),
+      children: label
+    }
+  );
+  if (returnStatus) {
+    return /* @__PURE__ */ jsx26(CheckoutShell, { slots, children: returnStatus.succeeded ? /* @__PURE__ */ jsx26(
+      StatusPanel,
+      {
+        slots,
+        title: "You're all set",
+        message: "Payment successful. Thank you!",
+        action: linkAction(homeHref, "Back home")
+      }
+    ) : /* @__PURE__ */ jsx26(
+      StatusPanel,
+      {
+        slots,
+        title: "Payment didn't go through",
+        message: returnStatus.error,
+        tone: "error",
+        action: linkAction(checkoutHref, "Try again")
+      }
+    ) });
+  }
+  if (isEmpty && !isLoading && !clientSecret) {
+    return /* @__PURE__ */ jsx26(CheckoutShell, { slots, children: /* @__PURE__ */ jsx26(
+      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__ */ jsx26(CheckoutShell, { slots, children: /* @__PURE__ */ jsx26(
+      StatusPanel,
+      {
+        slots,
+        title: "Something went wrong",
+        message: error,
+        tone: "error",
+        action: linkAction(menuHref, "Back to menu")
+      }
+    ) });
+  }
+  if (needsLocationSelection) {
+    return /* @__PURE__ */ jsx26(CheckoutShell, { slots, children: /* @__PURE__ */ jsx26(
+      StatusPanel,
+      {
+        slots,
+        title: "Choose a location",
+        message: "Please choose a location to continue checkout.",
+        action: /* @__PURE__ */ jsx26(
+          "button",
+          {
+            type: "button",
+            onClick: () => open("FIND_LOCATION_MODAL"),
+            className: cn3(slots.primaryButton, "w-full"),
+            children: "Select a location"
+          }
+        )
+      }
+    ) });
+  }
+  if (isReady && elementOptions) {
+    return /* @__PURE__ */ jsx26(CheckoutShell, { slots, children: /* @__PURE__ */ jsx26(
+      Elements,
+      {
+        stripe,
+        options: elementOptions,
+        children: /* @__PURE__ */ jsx26(PaymentStep, { slots, checkoutHref })
+      },
+      currentLocation?.stripe_account_id
+    ) });
+  }
+  return /* @__PURE__ */ jsx26(CheckoutShell, { slots, children: /* @__PURE__ */ jsx26(DetailsStep, { slots }) });
 }
 export {
   ACCORDION_MENU_DEFAULT_ITEM_CLASSES,
@@ -1944,19 +2280,46 @@ export {
   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,
-  ItemCustomizationForm,
+  CLIENT_ITEM_FORM_DEFAULT_ITEM_CLASSES as ITEM_CUSTOMIZATION_FORM_DEFAULT_ITEM_CLASSES,
+  ClientItemForm as ItemCustomizationClient,
+  ClientItemForm as ItemCustomizationForm,
+  OptionButton,
+  OrderLine,
+  OrderLines,
+  OrderTotals,
+  PaymentStep,
+  PortionPicker,
+  PortionSection,
+  PromoCode,
+  QuantitySection,
+  RuleSection,
+  StatusPanel,
+  SubmitButton,
+  VariantSection,
   mergeAccordionMenuItemClasses,
   mergeBreadcrumbsItemClasses,
   mergeCheckoutFormItemClasses,
+  mergeClientItemFormItemClasses,
   mergeFindLocationItemClasses,
   mergeGridMenuItemClasses,
-  mergeItemCustomizationFormItemClasses
+  mergeClientItemFormItemClasses as mergeItemCustomizationFormItemClasses,
+  money3 as money
 };
 //# sourceMappingURL=components.mjs.map