@open-mercato/core 0.6.6-develop.6176.1.4507b99c2f → 0.6.6-develop.6198.1.0822f97cc6

package/dist/modules/workflows/frontend/checkout-demo/page.js

@@ -11,6 +11,11 @@ import {
   SelectTrigger,
   SelectValue
 } from "@open-mercato/ui/primitives/select";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { AlertCircle, AlertTriangle, Check, CheckCircle2, Info, Zap, Minus, Plus, X } from "lucide-react";
 import Link from "next/link";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
@@ -139,32 +144,33 @@ function CheckoutDemoPage() {
     PLN: "z\u0142"
   };
   const addToCart = (product) => {
-    const existing = cart.find((item) => item.id === product.id);
-    if (existing) {
-      setCart(cart.map(
-        (item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
-      ));
-    } else {
-      setCart([...cart, {
+    setCart((prev) => {
+      const existing = prev.find((item) => item.id === product.id);
+      if (existing) {
+        return prev.map(
+          (item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
+        );
+      }
+      return [...prev, {
         id: product.id,
         name: product.title,
         // Use resolved pricing from catalog pricing service (in USD)
         price: product.pricing?.unit_price_gross || product.pricing?.unit_price_net || 99.99,
         quantity: 1
-      }]);
-    }
+      }];
+    });
   };
   const updateQuantity = (productId, quantity) => {
     if (quantity <= 0) {
-      setCart(cart.filter((item) => item.id !== productId));
+      setCart((prev) => prev.filter((item) => item.id !== productId));
     } else {
-      setCart(cart.map(
+      setCart((prev) => prev.map(
         (item) => item.id === productId ? { ...item, quantity } : item
       ));
     }
   };
   const removeFromCart = (productId) => {
-    setCart(cart.filter((item) => item.id !== productId));
+    setCart((prev) => prev.filter((item) => item.id !== productId));
   };
   const exchangeRate = exchangeRates[selectedCurrency] || 1;
   const demoCart = cart.map((item) => ({
@@ -377,17 +383,17 @@ function CheckoutDemoPage() {
   const getStatusColor = (status) => {
     switch (status) {
       case "RUNNING":
-        return "text-blue-600 bg-blue-50";
+        return "text-status-info-text bg-status-info-bg";
       case "WAITING_FOR_ACTIVITIES":
-        return "text-purple-600 bg-purple-50";
+        return "text-status-info-text bg-status-info-bg";
       case "PAUSED":
-        return "text-yellow-600 bg-yellow-50";
+        return "text-status-warning-text bg-status-warning-bg";
       case "COMPLETED":
-        return "text-green-600 bg-green-50";
+        return "text-status-success-text bg-status-success-bg";
       case "FAILED":
-        return "text-red-600 bg-red-50";
+        return "text-status-error-text bg-status-error-bg";
       default:
-        return "text-gray-600 bg-gray-50";
+        return "text-status-neutral-text bg-status-neutral-bg";
     }
   };
   const getStepStatus = (stepId) => {
@@ -404,22 +410,22 @@ function CheckoutDemoPage() {
   const getStepColor = (status) => {
     switch (status) {
       case "completed":
-        return "bg-green-100 text-green-600 border-green-300";
+        return "bg-status-success-bg text-status-success-text border-status-success-border";
       case "current":
-        return "bg-blue-100 text-blue-600 border-blue-300";
+        return "bg-status-info-bg text-status-info-text border-status-info-border";
       case "paused":
-        return "bg-yellow-100 text-yellow-600 border-yellow-300";
+        return "bg-status-warning-bg text-status-warning-text border-status-warning-border";
       default:
-        return "bg-gray-100 text-gray-600 border-gray-300";
+        return "bg-status-neutral-bg text-status-neutral-text border-status-neutral-border";
     }
   };
   const getEventTypeBadgeClass = (eventType) => {
-    if (eventType.includes("STARTED")) return "bg-blue-100 text-blue-800";
-    if (eventType.includes("COMPLETED")) return "bg-green-100 text-green-800";
-    if (eventType.includes("FAILED") || eventType.includes("REJECTED")) return "bg-red-100 text-red-800";
-    if (eventType.includes("CANCELLED")) return "bg-gray-100 text-gray-800";
-    if (eventType.includes("ENTERED") || eventType.includes("EXITED")) return "bg-purple-100 text-purple-800";
-    return "bg-gray-100 text-gray-800";
+    if (eventType.includes("STARTED")) return "bg-status-info-bg text-status-info-text";
+    if (eventType.includes("COMPLETED")) return "bg-status-success-bg text-status-success-text";
+    if (eventType.includes("FAILED") || eventType.includes("REJECTED")) return "bg-status-error-bg text-status-error-text";
+    if (eventType.includes("CANCELLED")) return "bg-status-neutral-bg text-status-neutral-text";
+    if (eventType.includes("ENTERED") || eventType.includes("EXITED")) return "bg-status-info-bg text-status-info-text";
+    return "bg-status-neutral-bg text-status-neutral-text";
   };
   const formatEventType = (eventType) => {
     return eventType.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase());
@@ -541,7 +547,7 @@ function CheckoutDemoPage() {
       return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
           fieldTitle,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+          required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
         ] }),
         fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
         /* @__PURE__ */ jsxs(
@@ -563,7 +569,7 @@ function CheckoutDemoPage() {
           return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
             ] }),
             fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
             /* @__PURE__ */ jsx(
@@ -581,18 +587,17 @@ function CheckoutDemoPage() {
           return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
             ] }),
             fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
             /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
                 type: "date",
                 id: fieldName,
                 value: formData[fieldName] || "",
                 onChange: (e) => handleFieldChange(fieldName, e.target.value),
-                required,
-                className: inputClasses
+                required
               }
             )
           ] }, fieldName);
@@ -601,18 +606,17 @@ function CheckoutDemoPage() {
           return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
             ] }),
             fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
             /* @__PURE__ */ jsx(
-              "textarea",
+              Textarea,
               {
                 id: fieldName,
                 value: formData[fieldName] || "",
                 onChange: (e) => handleFieldChange(fieldName, e.target.value),
                 required,
-                rows: 3,
-                className: inputClasses
+                rows: 3
               }
             )
           ] }, fieldName);
@@ -620,7 +624,7 @@ function CheckoutDemoPage() {
         return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
           ] }),
           fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
           /* @__PURE__ */ jsx(
@@ -639,7 +643,7 @@ function CheckoutDemoPage() {
         return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
           ] }),
           fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
           /* @__PURE__ */ jsx(
@@ -658,18 +662,16 @@ function CheckoutDemoPage() {
         return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              Checkbox,
               {
-                type: "checkbox",
                 id: fieldName,
                 checked: !!formData[fieldName],
-                onChange: (e) => handleFieldChange(fieldName, e.target.checked),
-                className: "w-4 h-4 text-yellow-600 border-gray-300 rounded focus-visible:ring-ring"
+                onCheckedChange: (v) => handleFieldChange(fieldName, v === true)
               }
             ),
             /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-gray-700", children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
             ] })
           ] }),
           fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 ml-6", children: fieldDescription })
@@ -678,7 +680,7 @@ function CheckoutDemoPage() {
         return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
           /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
           ] }),
           fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-1", children: fieldDescription }),
           /* @__PURE__ */ jsx(
@@ -709,12 +711,12 @@ function CheckoutDemoPage() {
             /* @__PURE__ */ jsxs("label", { htmlFor: "customer-select", className: "block text-sm font-medium text-gray-700 mb-2", children: [
               t("workflows.checkoutDemo.customer.selectLabel", "Select Customer"),
               " ",
-              /* @__PURE__ */ jsx("span", { className: "text-red-600", children: "*" })
+              /* @__PURE__ */ jsx("span", { className: "text-status-error-text", children: "*" })
             ] }),
             customersLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-3 text-sm text-gray-500", children: [
-              /* @__PURE__ */ jsx("div", { className: "inline-block w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-2" }),
+              /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }),
               t("workflows.checkoutDemo.customer.loading", "Loading customers...")
-            ] }) : customers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800", children: t("workflows.checkoutDemo.customer.noneFound", "No customers found. Please create a customer first.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            ] }) : customers.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-sm text-status-warning-text", children: t("workflows.checkoutDemo.customer.noneFound", "No customers found. Please create a customer first.") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs(
                 Select,
                 {
@@ -750,9 +752,9 @@ function CheckoutDemoPage() {
           /* @__PURE__ */ jsxs("div", { className: "mb-6 pb-6 border-b border-gray-200", children: [
             /* @__PURE__ */ jsx("label", { htmlFor: "product-select", className: "block text-sm font-medium text-gray-700 mb-2", children: t("workflows.checkoutDemo.product.addLabel", "Add Products to Cart") }),
             productsLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-3 text-sm text-gray-500", children: [
-              /* @__PURE__ */ jsx("div", { className: "inline-block w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-2" }),
+              /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }),
               t("workflows.checkoutDemo.product.loading", "Loading products...")
-            ] }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-800", children: t("workflows.checkoutDemo.product.noneFound", "No products found. Please create products in the catalog first.") }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            ] }) : products.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-3 text-sm text-status-warning-text", children: t("workflows.checkoutDemo.product.noneFound", "No products found. Please create products in the catalog first.") }) : /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsxs(
                 Select,
                 {
@@ -801,20 +803,26 @@ function CheckoutDemoPage() {
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(
-                "button",
+                IconButton,
                 {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  "aria-label": t("workflows.checkoutDemo.cart.decreaseQty", "Decrease quantity"),
                   onClick: () => updateQuantity(item.id, item.quantity - 1),
-                  className: "w-7 h-7 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50 text-gray-600",
-                  children: "-"
+                  children: /* @__PURE__ */ jsx(Minus, {})
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "w-8 text-center text-sm font-medium", children: item.quantity }),
               /* @__PURE__ */ jsx(
-                "button",
+                IconButton,
                 {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  "aria-label": t("workflows.checkoutDemo.cart.increaseQty", "Increase quantity"),
                   onClick: () => updateQuantity(item.id, item.quantity + 1),
-                  className: "w-7 h-7 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50 text-gray-600",
-                  children: "+"
+                  children: /* @__PURE__ */ jsx(Plus, {})
                 }
               )
             ] }),
@@ -824,12 +832,15 @@ function CheckoutDemoPage() {
                 (item.price * item.quantity).toFixed(2)
               ] }),
               /* @__PURE__ */ jsx(
-                "button",
+                IconButton,
                 {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "text-status-error-text hover:bg-status-error-bg",
+                  "aria-label": t("workflows.checkoutDemo.cart.removeItemTitle", "Remove from cart"),
                   onClick: () => removeFromCart(item.id),
-                  className: "w-7 h-7 flex items-center justify-center rounded hover:bg-red-50 text-red-600",
-                  title: t("workflows.checkoutDemo.cart.removeItemTitle", "Remove from cart"),
-                  children: "\xD7"
+                  children: /* @__PURE__ */ jsx(X, {})
                 }
               )
             ] })
@@ -864,12 +875,12 @@ function CheckoutDemoPage() {
               ] })
             ] })
           ] }),
-          validationErrors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 mt-6", children: [
-            /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-red-800 mb-2 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          validationErrors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-4 mt-6", children: [
+            /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium text-status-error-text mb-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
               t("workflows.checkoutDemo.validation.errorTitle", "Cannot start checkout")
             ] }),
-            /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1", children: validationErrors.map((err, idx) => /* @__PURE__ */ jsx("li", { className: "text-sm text-red-700", children: err.message }, idx)) })
+            /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside space-y-1", children: validationErrors.map((err, idx) => /* @__PURE__ */ jsx("li", { className: "text-sm text-status-error-text", children: err.message }, idx)) })
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -885,14 +896,14 @@ function CheckoutDemoPage() {
         ] }),
         result && (result.currentStepId === "start" || result.currentStepId === "cart_validation") && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-blue-600 rounded-full animate-pulse" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-info-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.cartValidation.title", "Validating Cart")
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            result.status === "WAITING_FOR_ACTIVITIES" ? /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 border border-purple-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-purple-800 font-medium", children: t("workflows.checkoutDemo.cartValidation.processingActivities", "Processing background activities...") }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-purple-700 mt-1", children: t("workflows.checkoutDemo.cartValidation.processingActivitiesHint", "The workflow is waiting for async tasks to complete before proceeding.") })
-            ] }) : /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-800", children: t("workflows.checkoutDemo.cartValidation.inventoryCheck", "Checking cart items and inventory availability...") }) }),
+            result.status === "WAITING_FOR_ACTIVITIES" ? /* @__PURE__ */ jsxs("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text font-medium", children: t("workflows.checkoutDemo.cartValidation.processingActivities", "Processing background activities...") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-status-info-text mt-1", children: t("workflows.checkoutDemo.cartValidation.processingActivitiesHint", "The workflow is waiting for async tasks to complete before proceeding.") })
+            ] }) : /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.checkoutDemo.cartValidation.inventoryCheck", "Checking cart items and inventory availability...") }) }),
             demoCart.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center border-b border-gray-200 pb-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                 /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900", children: item.name }),
@@ -902,7 +913,7 @@ function CheckoutDemoPage() {
                   item.quantity
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-green-600 text-sm", children: t("workflows.checkoutDemo.cartValidation.available", "\u2713 Available") })
+              /* @__PURE__ */ jsx("span", { className: "text-status-success-text text-sm", children: t("workflows.checkoutDemo.cartValidation.available", "\u2713 Available") })
             ] }, item.id)),
             /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-gray-200", children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-900", children: [
               t("workflows.checkoutDemo.cartValidation.totalPrefix", "Total:"),
@@ -914,17 +925,17 @@ function CheckoutDemoPage() {
         ] }),
         result && result.currentStepId === "customer_info" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-yellow-600 rounded-full animate-pulse" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-warning-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.customerInfo.title", "Customer Information Required")
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.promptTitle", "Please provide your shipping information") }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-yellow-700", children: t("workflows.checkoutDemo.customerInfo.promptHint", "The workflow is paused waiting for customer details. Complete the form to continue checkout.") })
+            /* @__PURE__ */ jsxs("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.promptTitle", "Please provide your shipping information") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-status-warning-text", children: t("workflows.checkoutDemo.customerInfo.promptHint", "The workflow is paused waiting for customer details. Complete the form to continue checkout.") })
             ] }),
-            tasksError ? /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800 font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.errorLoadingTask", "Error loading task") }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-red-700 mb-3", children: tasksError instanceof Error ? tasksError.message : t("workflows.checkoutDemo.customerInfo.unknownError", "Unknown error") }),
+            tasksError ? /* @__PURE__ */ jsxs("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.errorLoadingTask", "Error loading task") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text mb-3", children: tasksError instanceof Error ? tasksError.message : t("workflows.checkoutDemo.customerInfo.unknownError", "Unknown error") }),
               /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -935,11 +946,11 @@ function CheckoutDemoPage() {
                   children: t("workflows.checkoutDemo.customerInfo.retry", "Retry")
                 }
               )
-            ] }) : tasksLoading ? /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "inline-block w-8 h-8 border-4 border-yellow-600 border-t-transparent rounded-full animate-spin" }),
+            ] }) : tasksLoading ? /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "lg" }),
               /* @__PURE__ */ jsx("p", { className: "ml-3 text-sm text-gray-600", children: t("workflows.checkoutDemo.customerInfo.loading", "Loading task...") })
             ] }) }) : userTasks.length > 0 ? /* @__PURE__ */ jsxs("form", { onSubmit: handleTaskSubmit, className: "bg-white border border-gray-200 rounded-lg p-4 space-y-4", children: [
-              taskError && /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800", children: taskError }) }),
+              taskError && /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text", children: taskError }) }),
               userTasks[0].formSchema?.properties && /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Object.keys(userTasks[0].formSchema.properties).map((fieldName) => {
                 const required = userTasks[0].formSchema.required?.includes(fieldName) || false;
                 return renderFormField(fieldName, userTasks[0].formSchema.properties[fieldName], required);
@@ -949,13 +960,13 @@ function CheckoutDemoPage() {
                 {
                   type: "submit",
                   disabled: submittingTask,
-                  className: "w-full bg-yellow-600 hover:bg-yellow-700 text-white font-medium",
+                  className: "w-full font-medium",
                   children: submittingTask ? t("workflows.checkoutDemo.customerInfo.submitting", "Submitting...") : t("workflows.checkoutDemo.customerInfo.submit", "Complete & Continue Checkout")
                 }
               ) })
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-orange-50 border border-orange-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-orange-800 font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.noTaskTitle", "No task found") }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-orange-700 mb-3", children: t("workflows.checkoutDemo.customerInfo.noTaskHint", "The user task may still be creating. This usually takes less than a second.") }),
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text font-medium mb-2", children: t("workflows.checkoutDemo.customerInfo.noTaskTitle", "No task found") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-status-warning-text mb-3", children: t("workflows.checkoutDemo.customerInfo.noTaskHint", "The user task may still be creating. This usually takes less than a second.") }),
               /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -971,12 +982,12 @@ function CheckoutDemoPage() {
         ] }),
         result && result.currentStepId === "payment_initiation" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-blue-600 rounded-full animate-pulse" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-info-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.paymentInitiation.title", "Initiating Payment")
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-800 font-medium mb-2", children: t("workflows.checkoutDemo.paymentInitiation.detailsTitle", "Payment Details") }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text font-medium mb-2", children: t("workflows.checkoutDemo.paymentInitiation.detailsTitle", "Payment Details") }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: t("workflows.checkoutDemo.paymentInitiation.methodLabel", "Method:") }),
@@ -992,23 +1003,23 @@ function CheckoutDemoPage() {
               ] })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-              /* @__PURE__ */ jsx("div", { className: "inline-block w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-4" }),
+              /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "mb-4" }),
               /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: t("workflows.checkoutDemo.paymentInitiation.sending", "Sending payment request...") })
             ] }) })
           ] })
         ] }),
         result && result.currentStepId === "wait_payment_confirmation" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-yellow-600 rounded-full animate-pulse" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-warning-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.waitPayment.title", "Waiting for Payment Confirmation")
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 font-medium mb-2", children: t("workflows.checkoutDemo.waitPayment.heading", "Awaiting Payment Provider Webhook") }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-yellow-700 mb-3", children: t("workflows.checkoutDemo.waitPayment.description", "The workflow is paused waiting for the payment provider to confirm the transaction via webhook. In production, this would be sent automatically by Stripe, PayPal, etc.") }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs text-yellow-700", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text font-medium mb-2", children: t("workflows.checkoutDemo.waitPayment.heading", "Awaiting Payment Provider Webhook") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-status-warning-text mb-3", children: t("workflows.checkoutDemo.waitPayment.description", "The workflow is paused waiting for the payment provider to confirm the transaction via webhook. In production, this would be sent automatically by Stripe, PayPal, etc.") }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs text-status-warning-text", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-yellow-600 rounded-full" }),
+                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-status-warning-icon rounded-full" }),
                   /* @__PURE__ */ jsxs("span", { children: [
                     t("workflows.checkoutDemo.waitPayment.statusLabel", "Status:"),
                     " ",
@@ -1016,41 +1027,24 @@ function CheckoutDemoPage() {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-yellow-600 rounded-full" }),
+                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-status-warning-icon rounded-full" }),
                   /* @__PURE__ */ jsxs("span", { children: [
                     t("workflows.checkoutDemo.waitPayment.signalNameLabel", "Signal Name:"),
                     " ",
-                    /* @__PURE__ */ jsx("code", { className: "bg-yellow-100 px-1 py-0.5 rounded", children: "payment_confirmed" })
+                    /* @__PURE__ */ jsx("code", { className: "bg-status-warning-bg px-1 py-0.5 rounded", children: "payment_confirmed" })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-yellow-600 rounded-full" }),
+                  /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-status-warning-icon rounded-full" }),
                   /* @__PURE__ */ jsx("span", { children: t("workflows.checkoutDemo.waitPayment.timeout", "Timeout: 5 minutes") })
                 ] })
               ] })
             ] }),
-            signalError && /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "h-5 w-5 text-red-600 mt-0.5 flex-shrink-0",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    }
-                  )
-                }
-              ),
+            signalError && /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-status-error-text mt-0.5 flex-shrink-0" }),
               /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-red-800", children: t("workflows.checkoutDemo.waitPayment.signalErrorTitle", "Signal Error") }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-red-700 mt-1 whitespace-pre-wrap", children: signalError }),
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-status-error-text", children: t("workflows.checkoutDemo.waitPayment.signalErrorTitle", "Signal Error") }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text mt-1 whitespace-pre-wrap", children: signalError }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -1071,7 +1065,7 @@ function CheckoutDemoPage() {
                 {
                   onClick: handleSendPaymentSignal,
                   disabled: sendingSignal || result.status !== "PAUSED",
-                  className: "w-full bg-yellow-600 hover:bg-yellow-700 text-white font-medium",
+                  className: "w-full font-medium",
                   children: sendingSignal ? t("workflows.checkoutDemo.waitPayment.sendingSignal", "Sending Signal...") : t("workflows.checkoutDemo.waitPayment.simulateWebhook", "\u{1F514} Simulate Payment Webhook")
                 }
               ),
@@ -1081,33 +1075,33 @@ function CheckoutDemoPage() {
                 t("workflows.checkoutDemo.waitPayment.sendsSuffix", " event")
               ] })
             ] }),
-            result.status !== "PAUSED" && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-blue-800", children: [
+            result.status !== "PAUSED" && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-status-info-text", children: [
               /* @__PURE__ */ jsx("strong", { children: t("workflows.checkoutDemo.waitPayment.noteLabel", "Note:") }),
               " ",
               t("workflows.checkoutDemo.waitPayment.noteStatusPrefix", "Workflow status is "),
               /* @__PURE__ */ jsx("strong", { children: result.status }),
               t("workflows.checkoutDemo.waitPayment.noteStatusSuffix", ". The signal button will appear when the workflow is fully paused at this step.")
             ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-blue-800", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-status-info-text", children: [
               /* @__PURE__ */ jsx("strong", { children: t("workflows.checkoutDemo.waitPayment.realWorldLabel", "Real-world scenario:") }),
               " ",
               t("workflows.checkoutDemo.waitPayment.realWorldPart1", "Your payment provider (Stripe, PayPal) would send a webhook to your server endpoint (e.g., "),
-              /* @__PURE__ */ jsx("code", { className: "bg-blue-100 px-1 py-0.5 rounded", children: "/api/webhooks/payments" }),
+              /* @__PURE__ */ jsx("code", { className: "bg-status-info-bg px-1 py-0.5 rounded", children: "/api/webhooks/payments" }),
               t("workflows.checkoutDemo.waitPayment.realWorldPart2", "), which would then call "),
-              /* @__PURE__ */ jsx("code", { className: "bg-blue-100 px-1 py-0.5 rounded", children: "POST /api/workflows/instances/[id]/signal" }),
+              /* @__PURE__ */ jsx("code", { className: "bg-status-info-bg px-1 py-0.5 rounded", children: "POST /api/workflows/instances/[id]/signal" }),
               t("workflows.checkoutDemo.waitPayment.realWorldPart3", " to resume the workflow.")
             ] }) })
           ] })
         ] }),
         result && result.currentStepId === "order_confirmation" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-blue-600 rounded-full animate-pulse" }),
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-info-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.orderConfirmation.title", "Creating Order")
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-green-50 border border-green-200 rounded-lg p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-green-800 font-medium mb-1", children: t("workflows.checkoutDemo.orderConfirmation.paymentSuccess", "Payment Successful!") }),
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-green-700", children: [
+            /* @__PURE__ */ jsxs("div", { className: "bg-status-success-bg border border-status-success-border rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-status-success-text font-medium mb-1", children: t("workflows.checkoutDemo.orderConfirmation.paymentSuccess", "Payment Successful!") }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-status-success-text", children: [
                 t("workflows.checkoutDemo.orderConfirmation.transactionIdPrefix", "Transaction ID: "),
                 result.instanceId.slice(0, 8),
                 "..."
@@ -1115,11 +1109,11 @@ function CheckoutDemoPage() {
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-green-600", children: "\u2713" }),
+                /* @__PURE__ */ jsx("span", { className: "text-status-success-text", children: "\u2713" }),
                 /* @__PURE__ */ jsx("span", { className: "text-gray-700", children: t("workflows.checkoutDemo.orderConfirmation.creatingRecord", "Creating order record") })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "inline-block w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+                /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
                 /* @__PURE__ */ jsx("span", { className: "text-gray-700", children: t("workflows.checkoutDemo.orderConfirmation.sendingEmail", "Sending confirmation email") })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
@@ -1131,7 +1125,7 @@ function CheckoutDemoPage() {
         ] }),
         result && result.status === "COMPLETED" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
-            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-status-success-bg rounded-full mb-4", children: /* @__PURE__ */ jsx(Check, { className: "w-8 h-8 text-status-success-text" }) }),
             /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-2", children: t("workflows.checkoutDemo.completed.title", "Order Confirmed!") }),
             /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
               t("workflows.checkoutDemo.completed.orderNumberPrefix", "Order #"),
@@ -1170,7 +1164,7 @@ function CheckoutDemoPage() {
                 ] })
               ] }, item.id))
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-blue-800", children: t("workflows.checkoutDemo.completed.emailSent", "\u2709\uFE0F A confirmation email has been sent to demo@example.com") }) }),
+            /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-status-info-text", children: t("workflows.checkoutDemo.completed.emailSent", "\u2709\uFE0F A confirmation email has been sent to demo@example.com") }) }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1186,8 +1180,8 @@ function CheckoutDemoPage() {
           ] })
         ] }),
         result && result.status === "FAILED" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-red-900 mb-4", children: t("workflows.checkoutDemo.failed.title", "Order Failed") }),
-          /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800", children: t("workflows.checkoutDemo.failed.message", "Unfortunately, your order could not be processed. Please try again.") }) }),
+          /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-status-error-text mb-4", children: t("workflows.checkoutDemo.failed.title", "Order Failed") }),
+          /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text", children: t("workflows.checkoutDemo.failed.message", "Unfortunately, your order could not be processed. Please try again.") }) }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -1204,52 +1198,18 @@ function CheckoutDemoPage() {
       /* @__PURE__ */ jsxs("div", { className: "bg-white shadow rounded-lg p-6", children: [
         /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-4", children: t("workflows.checkoutDemo.progress.title", "Workflow Progress") }),
         !result && !error && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "mx-auto h-12 w-12 text-gray-400",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M13 10V3L4 14h7v7l9-11h-7z"
-                }
-              )
-            }
-          ),
+          /* @__PURE__ */ jsx(Zap, { className: "mx-auto h-12 w-12 text-muted-foreground" }),
           /* @__PURE__ */ jsx("p", { className: "mt-4 text-gray-600", children: t("workflows.checkoutDemo.progress.prompt", 'Click "Start Checkout Workflow" to begin') })
         ] }),
         loading && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
-          /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" }),
+          /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "mx-auto" }),
           /* @__PURE__ */ jsx("p", { className: "mt-4 text-gray-600", children: t("workflows.checkoutDemo.progress.startingWorkflow", "Starting workflow...") })
         ] }),
-        error && /* @__PURE__ */ jsx("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: "h-5 w-5 text-red-600 mt-0.5 flex-shrink-0",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: 2,
-                  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                }
-              )
-            }
-          ),
+        error && /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-status-error-text mt-0.5 flex-shrink-0" }),
           /* @__PURE__ */ jsxs("div", { className: "ml-3 flex-1", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-red-800", children: t("workflows.checkoutDemo.progress.errorTitle", "Error") }),
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-700 whitespace-pre-wrap", children: error }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-status-error-text", children: t("workflows.checkoutDemo.progress.errorTitle", "Error") }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-status-error-text whitespace-pre-wrap", children: error }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1305,32 +1265,15 @@ function CheckoutDemoPage() {
               );
             }) })
           ] }),
-          result.status === "PAUSED" && userTasks.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 pt-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4", children: [
+          result.status === "PAUSED" && userTasks.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 pt-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-status-warning-bg border border-status-warning-border rounded-lg p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start mb-3", children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  className: "h-5 w-5 text-yellow-600 mt-0.5",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-status-warning-text mt-0.5" }),
               /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-yellow-800", children: t("workflows.checkoutDemo.progress.userActionTitle", "User Action Required") }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-700 mt-1", children: t("workflows.checkoutDemo.progress.userActionHint", "This workflow is paused waiting for user input. Please complete the task below to continue.") })
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-status-warning-text", children: t("workflows.checkoutDemo.progress.userActionTitle", "User Action Required") }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-status-warning-text mt-1", children: t("workflows.checkoutDemo.progress.userActionHint", "This workflow is paused waiting for user input. Please complete the task below to continue.") })
               ] })
             ] }),
-            userTasks.map((task) => /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-white rounded-md p-3 border border-yellow-200", children: [
+            userTasks.map((task) => /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-white rounded-md p-3 border border-status-warning-border", children: [
               /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                 /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-gray-900", children: task.taskName }),
                 task.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1", children: task.description }),
@@ -1339,14 +1282,7 @@ function CheckoutDemoPage() {
                   new Date(task.dueDate).toLocaleString()
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: `/backend/tasks/${task.id}`,
-                  className: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring",
-                  children: t("workflows.checkoutDemo.progress.completeTask", "Complete Task \u2192")
-                }
-              ) })
+              /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: `/backend/tasks/${task.id}`, children: t("workflows.checkoutDemo.progress.completeTask", "Complete Task \u2192") }) }) })
             ] }, task.id))
           ] }) }),
           result.status === "RUNNING" && currentStep && currentStep.stepType !== "END" && /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-4", children: [
@@ -1362,39 +1298,15 @@ function CheckoutDemoPage() {
               }
             )
           ] }),
-          result.status === "COMPLETED" && /* @__PURE__ */ jsx("div", { className: "bg-green-50 border border-green-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: "h-5 w-5 text-green-600 mt-0.5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  }
-                )
-              }
-            ),
+          result.status === "COMPLETED" && /* @__PURE__ */ jsx("div", { className: "bg-status-success-bg border border-status-success-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 text-status-success-text mt-0.5" }),
             /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-green-800", children: t("workflows.checkoutDemo.progress.workflowCompleted", "Workflow Completed!") }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-green-700", children: t("workflows.checkoutDemo.progress.workflowCompletedHint", "All steps executed successfully") })
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-status-success-text", children: t("workflows.checkoutDemo.progress.workflowCompleted", "Workflow Completed!") }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-status-success-text", children: t("workflows.checkoutDemo.progress.workflowCompletedHint", "All steps executed successfully") })
             ] })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200 pt-4 space-y-3", children: [
-            /* @__PURE__ */ jsx(
-              Link,
-              {
-                href: `/backend/instances/${result.instanceId}`,
-                className: "block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
-                children: t("workflows.checkoutDemo.progress.viewInAdmin", "View in Admin")
-              }
-            ),
+            /* @__PURE__ */ jsx(Button, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(Link, { href: `/backend/instances/${result.instanceId}`, children: t("workflows.checkoutDemo.progress.viewInAdmin", "View in Admin") }) }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -1422,8 +1334,8 @@ function CheckoutDemoPage() {
               ")"
             ] })
           ] }),
-          (result.status === "RUNNING" || result.status === "WAITING_FOR_ACTIVITIES") && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-red-600 rounded-full animate-pulse" }),
+          (result.status === "RUNNING" || result.status === "WAITING_FOR_ACTIVITIES") && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-error-bg text-status-error-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-status-error-icon rounded-full animate-pulse" }),
             t("workflows.checkoutDemo.events.liveBadge", "Live")
           ] })
         ] }),
@@ -1431,7 +1343,7 @@ function CheckoutDemoPage() {
           Link,
           {
             href: `/backend/events?workflowInstanceId=${result.instanceId}`,
-            className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
+            className: "text-sm text-primary hover:underline",
             children: t("workflows.checkoutDemo.events.viewAllLink", "View all events \u2192")
           }
         )
@@ -1463,7 +1375,7 @@ function CheckoutDemoPage() {
               Link,
               {
                 href: `/backend/events/${event.id}`,
-                className: "text-xs text-blue-600 hover:text-blue-800 hover:underline whitespace-nowrap",
+                className: "text-xs text-primary hover:underline whitespace-nowrap",
                 children: t("workflows.checkoutDemo.events.detailsLink", "Details")
               }
             )
@@ -1475,7 +1387,7 @@ function CheckoutDemoPage() {
         Link,
         {
           href: `/backend/events?workflowInstanceId=${result.instanceId}`,
-          className: "text-sm text-blue-600 hover:text-blue-800 hover:underline",
+          className: "text-sm text-primary hover:underline",
           children: [
             t("workflows.checkoutDemo.events.viewAllPrefix", "View all"),
             " ",
@@ -1486,28 +1398,11 @@ function CheckoutDemoPage() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-      /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "h-5 w-5 text-blue-600 mt-0.5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: 2,
-              d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            }
-          )
-        }
-      ),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+      /* @__PURE__ */ jsx(Info, { className: "h-5 w-5 text-status-info-text mt-0.5" }),
       /* @__PURE__ */ jsxs("div", { className: "ml-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-blue-800", children: t("workflows.checkoutDemo.features.title", "Features") }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 text-sm text-blue-700", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-status-info-text", children: t("workflows.checkoutDemo.features.title", "Features") }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 text-sm text-status-info-text", children: [
           /* @__PURE__ */ jsxs("ul", { className: "list-disc list-inside space-y-1", children: [
             /* @__PURE__ */ jsxs("li", { children: [
               /* @__PURE__ */ jsx("strong", { children: t("workflows.checkoutDemo.features.signalFlow.label", "Signal-Based Payment Flow:") }),
@@ -1546,7 +1441,7 @@ function CheckoutDemoPage() {
               t("workflows.checkoutDemo.features.startPreconditions.body", " Validate business rules before workflow can start (e.g., cart not empty) with localized error messages")
             ] })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2", children: /* @__PURE__ */ jsx(Link, { href: "/backend/definitions", className: "text-blue-800 hover:text-blue-900 underline", children: t("workflows.checkoutDemo.features.viewAllWorkflowsLink", "View all workflows \u2192") }) })
+          /* @__PURE__ */ jsx("p", { className: "mt-2", children: /* @__PURE__ */ jsx(Link, { href: "/backend/definitions", className: "text-primary underline", children: t("workflows.checkoutDemo.features.viewAllWorkflowsLink", "View all workflows \u2192") }) })
         ] })
       ] })
     ] }) })