function MainComponent({ logoSrc, storeName, paymentMethod, cardNumber, authorizationDate, creditAvailable, illustrationSrc }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] mx-auto p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Store logo", className: "w-[100px] h-[50px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: illustrationSrc, alt: "Payment method illustration", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[#1F2937] font-roboto text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Payment"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-r border-[#E5E7EB] pr-2 mr-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-university text-[#6B7280] text-sm", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-[#4B5563] font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, paymentMethod, /*#__PURE__*/ React.createElement("span", { className: "text-[#1F2937]", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, " **** ", cardNumber))), /*#__PURE__*/ React.createElement("div", { className: "text-[#6B7280] text-xs font-roboto mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, "By confirming below, you authorize us to debit your bank account for the order total on or after", /*#__PURE__*/ React.createElement("span", { className: "text-[#1F2937]", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, " ", authorizationDate), ". Authorization can't be revoked."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center rounded-lg border border-dashed border-[#EC4899] px-3 py-2 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#EC4899] font-roboto font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Credit:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: "useCredit", name: "useCredit", className: "w-4 h-4 text-[#EC4899] bg-white border-gray-300 rounded mr-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "useCredit", className: "text-sm text-[#9CA3AF] font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, creditAvailable, " credit available"))), /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center w-full p-3 bg-[#10B981] text-white font-roboto font-bold rounded-lg hover:bg-[#059669]", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "Pay Now", /*#__PURE__*/ React.createElement("i", { className: "fa fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F9FAFB] p-6 min-h-screen", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { logoSrc: "images/store-logo.png", illustrationSrc: "images/payment-method-illustration.png", storeName: "Simple Pay Demo Store", paymentMethod: "STRIPE TEST BANK", cardNumber: "6789", authorizationDate: "Mar 19, 2024", creditAvailable: "$78.59", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this })); }