@clickaroo/checkout-ui 0.1.5-beta → 0.1.7-beta

package/dist/storybook/storybook-static/assets/CustomCheckout.en-wshSoFMr.js

@@ -1,211 +0,0 @@
-import{j as e}from"./jsx-runtime-DiklIkkE.js";import{useMDXComponents as s}from"./index-ChEI-nsM.js";import{M as r,C as i}from"./index-BlPVJQpb.js";import{C as d,D as c}from"./CustomCheckout.stories-DhCrUQc1.js";import"./index-DRjF_FHU.js";import"./iframe-CueR_wS4.js";import"./index-B7ki2Uzk.js";import"./index-D-Mha1DF.js";import"./index-DrFu-skq.js";import"./useCheckoutContext-BXtGY5u3.js";/* empty css              */import"./CheckoutPage-d8MZfjpI.js";import"./CustomerInfo-BwyY9803.js";import"./ValidateInput-LNzX4jJP.js";import"./DeliveryAddress-QAGxLlLf.js";import"./PaymentMethods-afz1CTO5.js";function o(t){const n={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:d,title:"Components/CustomCheckout",name:"CustomCheckout (English)"}),`
-`,e.jsx(n.h1,{id:"customcheckout",children:"CustomCheckout"}),`
-`,e.jsxs(n.p,{children:["While the ",e.jsx(n.code,{children:"CheckoutPage"})," component provides a complete, ready-to-use checkout solution, you may need more control over the layout, styling, or user experience. This guide explains how to build a completely custom checkout flow by using the library's hooks and context, while still leveraging the core functionality."]}),`
-`,e.jsxs(n.p,{children:["The example above demonstrates a fully customized checkout page with custom styling, where we use the library's ",e.jsx(n.code,{children:"PaymentMethods"})," component (which is required) and build custom components for customer information, delivery address, and the submit button."]}),`
-`,e.jsx(i,{of:c}),`
-`,e.jsx(n.h3,{id:"overview",children:"Overview"}),`
-`,e.jsx(n.p,{children:"When building a custom checkout flow, you'll need to:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Wrap your components"})," in ",e.jsx(n.code,{children:"CheckoutProvider"})," to access the checkout context"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Use hooks"})," (",e.jsx(n.code,{children:"useCheckoutContext"}),", ",e.jsx(n.code,{children:"useOrderSubmission"}),") to access and update form data"]}),`
-`,e.jsxs(n.li,{children:[e.jsxs(n.strong,{children:["Use the ",e.jsx(n.code,{children:"PaymentMethods"})," component"]})," from the library (required - cannot be customized)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Update form data"})," through ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"})," methods"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Submit orders"})," using the ",e.jsx(n.code,{children:"useOrderSubmission"})," hook"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"understanding-form-data-structure",children:"Understanding Form Data Structure"}),`
-`,e.jsxs(n.p,{children:["When customizing components, you need to ensure all required fields are updated correctly. The library uses two main data structures: ",e.jsx(n.code,{children:"CustomerInfo"})," and ",e.jsx(n.code,{children:"DeliveryAddress"}),". Understanding these structures is crucial for building custom components that work seamlessly with the checkout flow."]}),`
-`,e.jsx(n.h4,{id:"customerinfo-fields",children:"CustomerInfo Fields"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface CustomerInfo {
-  firstName: string;  // First name (required)
-  lastName: string;   // Last name (required)
-  email: string;      // Email (required, must be valid email format)
-  phone: string;      // Phone (required, E.164 format)
-}
-`})}),`
-`,e.jsx(n.h4,{id:"deliveryaddress-fields",children:"DeliveryAddress Fields"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`interface DeliveryAddress {
-  country: string;    // Country (required)
-  address: string;    // Street address (required)
-  address2?: string;  // Address line 2 (optional)
-  city: string;       // City (required)
-  state: string;      // State/Province (required)
-  zipCode: string;    // Postal code (required)
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Important:"})," When customizing components, you must update all required fields through ",e.jsx(n.code,{children:"updateCustomerInfo"})," and ",e.jsx(n.code,{children:"updateDeliveryAddress"}),"."]}),`
-`,e.jsx(n.h3,{id:"using-checkoutprovider",children:"Using CheckoutProvider"}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutProvider"})," is the foundation of any custom checkout flow. It provides the context and state management needed for all checkout-related functionality. All your custom components must be wrapped within ",e.jsx(n.code,{children:"CheckoutProvider"}),"."]}),`
-`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"CheckoutProvider"})," props are identical to ",e.jsx(n.code,{children:"CheckoutPage"}),", supporting the following:"]}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Required Props:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"cart: CartItem[]"})," - Array of cart items. Each item must include ",e.jsx(n.code,{children:"sku"})," and ",e.jsx(n.code,{children:"offerPricePoint"}),". ",e.jsx(n.strong,{children:"Note:"})," Even for a single product, pass it as an array with one item."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"children: ReactNode"})," - Child components to be wrapped"]}),`
-`]}),`
-`,e.jsx(n.p,{children:e.jsx(n.strong,{children:"Optional Props:"})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onCheckoutInit?: () => void"})," - Callback function triggered when checkout initializes (immediately after component mount)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"googleApiKey?: string"})," - Google Places API Key for enabling address autocomplete functionality"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onPaymentInfoComplete?: (products: CheckoutCartItem[], totalAmount: number) => void"})," - Callback triggered when payment information is complete"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSubmit?: (products: CheckoutCartItem[], totalAmount: number) => void"})," - Callback triggered when order is submitted"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"onOrderSuccess?: (orderCode: string, tradeCode?: string) => void"})," - Callback triggered when order succeeds"]}),`
-`]}),`
-`,e.jsxs(n.p,{children:["For detailed parameter descriptions, see ",e.jsx(n.a,{href:"./?path=/docs/documentation-usage-guide-checkoutpage--docs",children:"CheckoutPage Documentation"}),"."]}),`
-`,e.jsx(n.h3,{id:"building-custom-components",children:"Building Custom Components"}),`
-`,e.jsx(n.p,{children:"Now let's see how to build custom components step by step. Each component uses hooks to access and update the checkout state."}),`
-`,e.jsx(n.h4,{id:"custom-customer-info-component",children:"Custom Customer Info Component"}),`
-`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"useCheckoutContext"})," hook to access ",e.jsx(n.code,{children:"customerInfo"})," and ",e.jsx(n.code,{children:"updateCustomerInfo"}),":"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@clickaroo/checkout-ui';
-
-function CustomCustomerInfo() {
-  const { customerInfo, updateCustomerInfo } = useCheckoutContext();
-
-  return (
-    <div>
-      <input 
-        value={customerInfo.firstName} 
-        onChange={(e) => updateCustomerInfo({ firstName: e.target.value })} 
-        placeholder="First Name"
-      />
-      <input 
-        value={customerInfo.lastName} 
-        onChange={(e) => updateCustomerInfo({ lastName: e.target.value })} 
-        placeholder="Last Name"
-      />
-      <input 
-        type="email" 
-        value={customerInfo.email} 
-        onChange={(e) => updateCustomerInfo({ email: e.target.value })} 
-        placeholder="Email"
-      />
-      <input 
-        type="tel" 
-        value={customerInfo.phone} 
-        onChange={(e) => updateCustomerInfo({ phone: e.target.value })} 
-        placeholder="Phone"
-      />
-    </div>
-  );
-}
-`})}),`
-`,e.jsx(n.h4,{id:"custom-delivery-address-component",children:"Custom Delivery Address Component"}),`
-`,e.jsxs(n.p,{children:["Similarly, use ",e.jsx(n.code,{children:"updateDeliveryAddress"})," to update address information:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext } from '@clickaroo/checkout-ui';
-
-function CustomDeliveryAddress() {
-  const { deliveryAddress, updateDeliveryAddress } = useCheckoutContext();
-
-  return (
-    <div>
-      <input 
-        value={deliveryAddress.country || ''} 
-        onChange={(e) => updateDeliveryAddress({ country: e.target.value })} 
-        placeholder="Country"
-      />
-      <input 
-        value={deliveryAddress.address || ''} 
-        onChange={(e) => updateDeliveryAddress({ address: e.target.value })} 
-        placeholder="Street Address"
-      />
-      <input 
-        value={deliveryAddress.city || ''} 
-        onChange={(e) => updateDeliveryAddress({ city: e.target.value })} 
-        placeholder="City"
-      />
-      <input 
-        value={deliveryAddress.state || ''} 
-        onChange={(e) => updateDeliveryAddress({ state: e.target.value })} 
-        placeholder="State/Province"
-      />
-      <input 
-        value={deliveryAddress.zipCode || ''} 
-        onChange={(e) => updateDeliveryAddress({ zipCode: e.target.value })} 
-        placeholder="ZIP Code"
-      />
-    </div>
-  );
-}
-`})}),`
-`,e.jsx(n.h4,{id:"custom-submit-button-component",children:"Custom Submit Button Component"}),`
-`,e.jsxs(n.p,{children:["Use ",e.jsx(n.code,{children:"useOrderSubmission"})," hook to handle order submission and ",e.jsx(n.code,{children:"isFormValid()"})," to check form validity:"]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useCheckoutContext, useOrderSubmission } from '@clickaroo/checkout-ui';
-
-function CustomSubmitButton() {
-  const { isFormValid } = useCheckoutContext();
-  const { isSubmitting, submitOrder } = useOrderSubmission();
-
-  const handleSubmit = async () => {
-    // Always check form validity before submitting
-    if (!isFormValid()) {
-      alert('Please complete all required fields');
-      return;
-    }
-
-    const result = await submitOrder();
-    
-    if (result.success) {
-      console.log('Order successful', result.orderCode);
-      // Handle success (e.g., redirect to success page)
-    } else {
-      console.error('Order failed', result.message);
-      // Handle error (e.g., show error message)
-    }
-  };
-
-  return (
-    <button 
-      onClick={handleSubmit} 
-      disabled={!isFormValid() || isSubmitting}
-    >
-      {isSubmitting ? 'Processing...' : 'Complete Order'}
-    </button>
-  );
-}
-`})}),`
-`,e.jsx(n.h3,{id:"complete-example",children:"Complete Example"}),`
-`,e.jsx(n.p,{children:"Here's a complete example putting it all together:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { 
-  CheckoutProvider, 
-  PaymentMethods,
-  useCheckoutContext,
-  useOrderSubmission
-} from '@clickaroo/checkout-ui';
-
-// ... (include the custom components above)
-
-function CustomCheckoutPage() {
-  const cart = [
-    {
-      sku: "TEST001",
-      offerPricePoint: "OPP-XXX",
-      title: "Product 1",
-      price: 99.99,
-    },
-  ];
-
-  return (
-    <CheckoutProvider 
-      cart={cart}
-      googleApiKey="YOUR_GOOGLE_API_KEY"
-      onCheckoutInit={() => {
-        console.log('Checkout initialized');
-      }}
-      onPaymentInfoComplete={(products, totalAmount) => {
-        console.log('Payment info complete', products, totalAmount);
-      }}
-      onOrderSubmit={(products, totalAmount) => {
-        console.log('Order submitted', products, totalAmount);
-      }}
-      onOrderSuccess={(orderCode, tradeCode) => {
-        console.log('Order successful', orderCode, tradeCode);
-      }}
-    >
-      <CustomCustomerInfo />
-      <CustomDeliveryAddress />
-      {/* PaymentMethods is required - cannot be customized */}
-      <PaymentMethods />
-      <CustomSubmitButton />
-    </CheckoutProvider>
-  );
-}
-`})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Key Point:"})," All components must be wrapped in ",e.jsx(n.code,{children:"CheckoutProvider"})]})]})}function A(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{A as default};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-B8CnjGCn.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-BW2h13W8.js";/* empty css              */import{u as S}from"./CheckoutPage-DSLcTghb.js";import"./CustomerInfo-DShSrjMR.js";import"./DeliveryAddress-DY5lFnTv.js";import{P as j}from"./PaymentMethods-DmV3o0ow.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BQkpNbox.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-CroxIBFh.js";/* empty css              */import{u as S}from"./CheckoutPage-DFb28rrp.js";import"./CustomerInfo-BMTfZ9z3.js";import"./DeliveryAddress-DOxyPw17.js";import{P as j}from"./PaymentMethods-DxorWSOl.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BdACubjk.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-w0N5TNgR.js";/* empty css              */import{u as S}from"./CheckoutPage-Dbzt3i55.js";import"./CustomerInfo-CYLNdAoo.js";import"./DeliveryAddress-BBT_-q56.js";import{P as j}from"./PaymentMethods-ro6Dfmcf.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-BrF5j7zs.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-C7KjDyWW.js";/* empty css              */import{u as S}from"./CheckoutPage-CDW7SRyI.js";import"./CustomerInfo-CPNuEjrH.js";import"./DeliveryAddress-CeuByf4d.js";import{P as j}from"./PaymentMethods-BFtlMopq.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-CKQKzMq0.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-B8tsk5b5.js";/* empty css              */import{u as S}from"./CheckoutPage-BsnzMxJk.js";import"./CustomerInfo-CTx1dFS3.js";import"./DeliveryAddress-X81XGbKD.js";import{P as j}from"./PaymentMethods-BNEEARzu.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-Cmt6r_Qb.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-Cyg-MLQs.js";/* empty css              */import{u as S}from"./CheckoutPage-B959BwZO.js";import"./CustomerInfo-CdeZHMcz.js";import"./DeliveryAddress-zAvEPauR.js";import{P as j}from"./PaymentMethods-DOuQM2jZ.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-DhCrUQc1.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-BXtGY5u3.js";/* empty css              */import{u as S}from"./CheckoutPage-d8MZfjpI.js";import"./CustomerInfo-BwyY9803.js";import"./DeliveryAddress-QAGxLlLf.js";import{P as j}from"./PaymentMethods-afz1CTO5.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};

package/dist/storybook/storybook-static/assets/CustomCheckout.stories-F2GZKkIG.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-DiklIkkE.js";import{C as x,S as h,u as m,a as y,c as C,D as v}from"./useCheckoutContext-DuJ1Ep0-.js";/* empty css              */import{u as S}from"./CheckoutPage-CrHN6Fcv.js";import"./CustomerInfo-D3WHpN32.js";import"./DeliveryAddress-Lfanl1PO.js";import{P as j}from"./PaymentMethods-e9HqQtxN.js";import{R as w}from"./index-DRjF_FHU.js";C(v);function z(){const{customerInfo:a,updateCustomerInfo:i}=m(),[e,s]=w.useState({}),t=(r,b)=>{const c=y.safeParse({...a,[r]:b});if(c.success)s(d=>{const l={...d};return delete l[r],l});else{const d=c.error.issues.find(l=>l.path.includes(r));s(d?l=>({...l,[r]:d.message}):l=>{const u={...l};return delete u[r],u})}};return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#9333ea"},children:"✨ Custom Customer Form ✨"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #faf5ff, #fdf2f8)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #e9d5ff",overflow:"hidden"},children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 First Name"}),o.jsx("input",{type:"text",value:a.firstName,onChange:r=>{i({firstName:r.target.value}),t("firstName",r.target.value)},onBlur:r=>{t("firstName",r.target.value),r.target.style.borderColor=e.firstName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.firstName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.firstName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter first name"}),e.firstName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.firstName})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#f3e8ff",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#7e22ce"},children:"👤 Last Name"}),o.jsx("input",{type:"text",value:a.lastName,onChange:r=>{i({lastName:r.target.value}),t("lastName",r.target.value)},onBlur:r=>{t("lastName",r.target.value),r.target.style.borderColor=e.lastName?"#ef4444":"#d8b4fe",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.lastName?"#ef4444":"#d8b4fe"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.lastName?"#ef4444":"#a855f7",r.target.style.boxShadow="0 0 0 4px rgba(192, 132, 252, 0.2)"},placeholder:"Enter last name"}),e.lastName&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.lastName})]})]}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📧 Email"}),o.jsx("input",{type:"email",value:a.email,onChange:r=>{i({email:r.target.value}),t("email",r.target.value)},onBlur:r=>{t("email",r.target.value),r.target.style.borderColor=e.email?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.email?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.email?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"your@email.com"}),e.email&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.email})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#fce7f3",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#be185d"},children:"📱 Phone"}),o.jsx("input",{type:"tel",value:a.phone,onChange:r=>{i({phone:r.target.value}),t("phone",r.target.value)},onBlur:r=>{t("phone",r.target.value),r.target.style.borderColor=e.phone?"#ef4444":"#f9a8d4",r.target.style.boxShadow="none"},style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:`2px solid ${e.phone?"#ef4444":"#f9a8d4"}`,borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:r=>{r.target.style.borderColor=e.phone?"#ef4444":"#ec4899",r.target.style.boxShadow="0 0 0 4px rgba(249, 168, 212, 0.2)"},placeholder:"+1 234 567 8900"}),e.phone&&o.jsx("div",{style:{color:"#ef4444",fontSize:"0.875rem",marginTop:"0.25rem"},children:e.phone})]})]})]})})]})}function k(){const{deliveryAddress:a,updateDeliveryAddress:i}=m();return o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#2563eb"},children:"📍 Custom Delivery Address"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #eff6ff, #ecfeff)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #bfdbfe",overflow:"hidden"},children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🌍 Country"}),o.jsx("input",{type:"text",value:a.country,onChange:e=>i({country:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter country"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"🏠 Street Address"}),o.jsx("input",{type:"text",value:a.address,onChange:e=>i({address:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter street address"})]}),o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"1.5rem",width:"100%"},children:[o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🏙️ City"}),o.jsx("input",{type:"text",value:a.city,onChange:e=>i({city:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter city"})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#cffafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#155e75"},children:"🗺️ State/Province"}),o.jsx("input",{type:"text",value:a.state,onChange:e=>i({state:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #5eead4",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#14b8a6",e.target.style.boxShadow="0 0 0 4px rgba(94, 234, 212, 0.2)"},onBlur:e=>{e.target.style.borderColor="#5eead4",e.target.style.boxShadow="none"},placeholder:"Enter state"})]})]}),o.jsxs("div",{style:{position:"relative"},children:[o.jsx("label",{style:{position:"absolute",top:"-1rem",left:"0.75rem",backgroundColor:"#dbeafe",padding:"0.25rem 0.5rem",fontSize:"0.875rem",fontWeight:"600",color:"#1e40af"},children:"📮 Zip Code"}),o.jsx("input",{type:"text",value:a.zipCode,onChange:e=>i({zipCode:e.target.value}),style:{width:"100%",padding:"0.75rem 1rem",backgroundColor:"white",border:"2px solid #93c5fd",borderRadius:"0.75rem",fontSize:"1.125rem",outline:"none",boxSizing:"border-box"},onFocus:e=>{e.target.style.borderColor="#3b82f6",e.target.style.boxShadow="0 0 0 4px rgba(147, 197, 253, 0.2)"},onBlur:e=>{e.target.style.borderColor="#93c5fd",e.target.style.boxShadow="none"},placeholder:"Enter zip code"})]})]})})]})}function N(){const{isFormValid:a}=m(),{isSubmitting:i,submitOrder:e}=S(),s=async()=>{if(!a()){alert("Please complete all required fields");return}const r=await e();r.success?alert(`Order successful! Order Code: ${r.orderCode}`):alert(r.message)},t=a()&&!i;return o.jsxs("div",{style:{marginTop:"1.5rem"},children:[o.jsx("button",{onClick:s,disabled:!t,style:{width:"100%",padding:"1rem 1.5rem",borderRadius:"0.75rem",fontWeight:"bold",fontSize:"1.125rem",background:t?"linear-gradient(to right, #9333ea, #db2777)":"#9ca3af",color:t?"white":"#374151",cursor:t?"pointer":"not-allowed",border:"none",boxShadow:t?"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)":"none",transition:"all 0.3s",transform:"scale(1)"},onMouseEnter:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #7e22ce, #be185d)",r.currentTarget.style.transform="scale(1.05)")},onMouseLeave:r=>{t&&(r.currentTarget.style.background="linear-gradient(to right, #9333ea, #db2777)",r.currentTarget.style.transform="scale(1)")},onMouseDown:r=>{t&&(r.currentTarget.style.transform="scale(0.95)")},onMouseUp:r=>{t&&(r.currentTarget.style.transform="scale(1.05)")},children:i?o.jsxs("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem"},children:[o.jsxs("svg",{style:{animation:"spin 1s linear infinite",height:"1.25rem",width:"1.25rem"},xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[o.jsx("circle",{style:{opacity:.25},cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),o.jsx("path",{style:{opacity:.75},fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Processing..."]}):"🎉 Complete Order"}),o.jsx("style",{children:`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `})]})}function E(){const a=[{sku:"TEST001",offerPricePoint:h.SINGLE,title:"Product Title",price:99.99}];return o.jsx(x,{cart:a,children:o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"1.5rem",maxWidth:"42rem",margin:"0 auto",padding:"1rem",width:"100%",boxSizing:"border-box"},children:[o.jsx(z,{}),o.jsx(k,{}),o.jsxs("div",{style:{marginBottom:"1.5rem"},children:[o.jsx("div",{style:{fontSize:"1.5rem",fontWeight:"bold",marginBottom:"1.5rem",color:"#059669"},children:"💳 Payment Methods"}),o.jsx("div",{style:{background:"linear-gradient(to bottom right, #ecfdf5, #d1fae5)",borderRadius:"1rem",padding:"1.5rem",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",border:"2px solid #86efac",overflow:"hidden"},children:o.jsx(j,{showText:!1})})]}),o.jsx(N,{})]})})}const R={component:E,title:"Components/CustomCheckout",parameters:{layout:"padded",docs:{description:{component:"Example of mixing library components with custom components. Demonstrates how to combine library components like CustomerInfo, DeliveryAddress, and PaymentMethods with custom components for a fully customized checkout experience."}}}},n={};var g,p,f;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:"{}",...(f=(p=n.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};const T=["Default"],M=Object.freeze(Object.defineProperty({__proto__:null,Default:n,__namedExportsOrder:T,default:R},Symbol.toStringTag,{value:"Module"}));export{M as C,n as D};