function MainComponent({ onSkip, currentStep, logistics, onInputChange, onContinue, onBack, onInvalidInput, onLocationSelect, googlePlacesAutocomplete }) { const title = logistics?.title; const inputs = logistics?.inputs || []; const handleInputValidation = (event)=>{ if (!event.target.checkValidity()) { onInvalidInput(event); } }; const isLocationInput = (name)=>name === 'location'; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 bg-white rounded-2xl shadow-lg relative font-roboto flex flex-col", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-5 right-5 font-medium text-gray-500", onClick: onSkip, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Skip"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center my-2 bg-gray-100 p-4 rounded-full w-20 h-20 mx-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-warehouse text-4xl text-gray-500", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus-circle text-gray-600 text-xl absolute", style: { bottom: '3rem', right: '10rem' }, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this })), title && /*#__PURE__*/ React.createElement("h2", { className: "text-center text-xl font-semibold my-4", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, title), inputs.map((input, index)=>/*#__PURE__*/ React.createElement("div", { key: input.name, className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, input.label), input.type === 'select' ? /*#__PURE__*/ React.createElement("select", { name: input.name, onChange: onInputChange, required: input.required, className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, input.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, option.label))) : isLocationInput(input.name) ? googlePlacesAutocomplete(input, onLocationSelect) : /*#__PURE__*/ React.createElement("input", { type: input.type, name: input.name, placeholder: input.placeholder, onChange: onInputChange, onInvalid: handleInputValidation, required: input.required, className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none", pattern: input.pattern, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-black text-white rounded-md", onClick: onBack, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-black text-white rounded-md", onClick: onContinue, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Next"))); } function StoryComponent() { const handleSkip = ()=>{}; const handleInputChange = (event)=>{}; const handleContinue = ()=>{}; const handleBack = ()=>{}; const handleInvalidInput = (event)=>{ event.target.classList.add('border-red-500'); event.target.setCustomValidity('Please match the requested format.'); }; const handleLocationSelect = ()=>{}; const googlePlacesAutocomplete = (input, callback)=>/*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }); const logisticsInfo = { title: 'Set up your logistics' }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(MainComponent, { onSkip: handleSkip, currentStep: 1, logistics: logisticsInfo, onInputChange: handleInputChange, onContinue: handleContinue, onBack: handleBack, onInvalidInput: handleInvalidInput, onLocationSelect: handleLocationSelect, googlePlacesAutocomplete: googlePlacesAutocomplete, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this })); }