function MainComponent() { const [activeTab, setActiveTab] = useState("create"); // 'create' or 'clone' const [preferences, setPreferences] = useState({ fragranceToClone: "", description: "", family: "", concentration: "Eau de Parfum", intensity: "moderate", style: "modern" }); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [streamingResponse, setStreamingResponse] = useState(""); const [searchTerm, setSearchTerm] = useState(""); const [selectedSubfamily, setSelectedSubfamily] = useState(""); const fragranceFamilies = { Floral: [ "White Floral", "Rose", "Violet", "Iris", "Jasmine", "Orange Blossom", "Tuberose", "Lily", "Carnation", "Gardenia", "Magnolia", "Muguet", "Peony", "Ylang-Ylang", "Lotus", "Cherry Blossom", "Osmanthus" ], Citrus: [ "Bergamot", "Lemon", "Lime", "Orange", "Grapefruit", "Mandarin", "Yuzu", "Neroli", "Petitgrain", "Kumquat", "Tangerine", "Pomelo" ], Oriental: [ "Amber", "Vanilla", "Spicy Oriental", "Woody Oriental", "Soft Oriental", "Floral Oriental", "Incense", "Resins", "Opoponax", "Myrrh" ], Woody: [ "Sandalwood", "Cedar", "Vetiver", "Oud", "Patchouli", "Pine", "Cypress", "Birch", "Gaiac Wood", "Rosewood", "Ebony", "Teak" ], Fougère: [ "Classic Fougère", "Modern Fougère", "Aromatic Fougère", "Green Fougère", "Spicy Fougère", "Woody Fougère", "Fresh Fougère" ], Chypre: [ "Classic Chypre", "Fruity Chypre", "Floral Chypre", "Green Chypre", "Woody Chypre", "Leather Chypre", "Modern Chypre" ], Fresh: [ "Aromatic", "Aquatic", "Green", "Citrus Fresh", "Ozonic", "Marine", "Water Lily", "Rain", "Ocean", "Cucumber", "Mint", "Herbal Fresh" ], Gourmand: [ "Vanilla", "Chocolate", "Coffee", "Caramel", "Honey", "Almond", "Cotton Candy", "Praline", "Coconut", "Marshmallow", "Rum", "Licorice" ], Leather: [ "Classic Leather", "Suede", "Modern Leather", "Smoky Leather", "Floral Leather", "Woody Leather", "Tobacco Leather" ], Spicy: [ "Warm Spices", "Hot Spices", "Pepper", "Cardamom", "Cinnamon", "Nutmeg", "Clove", "Ginger", "Saffron", "Star Anise" ], Green: [ "Grass", "Leaves", "Herbs", "Bamboo", "Tea", "Moss", "Fern", "Vegetable", "Garden", "Forest Floor", "Ivy" ], Fruity: [ "Apple", "Pear", "Peach", "Plum", "Berry", "Tropical", "Melon", "Fig", "Pomegranate", "Grape", "Mango", "Pineapple" ], Powdery: [ "Iris", "Heliotrope", "Cosmetic", "Makeup", "Baby Powder", "Violet Powder", "Rice Powder", "Almond Powder" ], Animalic: [ "Musk", "Civet", "Castoreum", "Ambergris", "Leather Animalic", "Honey Animalic" ], Mineral: [ "Salt", "Stone", "Flint", "Concrete", "Metal", "Sand", "Clay", "Graphite" ], Alcoholic: [ "Wine", "Whiskey", "Rum", "Cognac", "Champagne", "Beer", "Cocktail", "Absinthe" ], Tea: [ "Green Tea", "Black Tea", "White Tea", "Earl Grey", "Chai", "Matcha", "Oolong", "Rooibos" ], Medicinal: [ "Eucalyptus", "Camphor", "Menthol", "Antiseptic", "Herbal Medicine", "Traditional Chinese Medicine" ], Atmospheric: [ "Rain", "Petrichor", "Ozone", "Snow", "Air", "Fog", "Thunder", "Beach", "Bonfire" ], Smoke: [ "Tobacco", "Incense", "Burnt Wood", "Fire", "BBQ", "Charcoal", "Ash", "Smoked Tea" ] }; const allFamiliesAndSubfamilies = Object.entries(fragranceFamilies).flatMap(([family, subfamilies])=>[ family, ...subfamilies ]); const filteredFamilies = searchTerm ? Object.fromEntries(Object.entries(fragranceFamilies).filter(([family, subfamilies])=>family.toLowerCase().includes(searchTerm.toLowerCase()) || subfamilies.some((sub)=>sub.toLowerCase().includes(searchTerm.toLowerCase())))) : fragranceFamilies; const concentrations = [ "Parfum/Extrait", "Eau de Parfum", "Eau de Toilette", "Eau de Cologne", "Body Spray" ]; const intensities = [ "very light", "light", "moderate", "strong", "very strong" ]; const styles = [ "modern", "classic", "experimental", "minimalist", "complex" ]; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingResponse, onFinish: (message)=>{ setResult(message); setStreamingResponse(""); } }); const handleFamilyChange = (family)=>{ setPreferences((prev)=>({ ...prev, family, subfamily: "" })); setSelectedSubfamily(""); }; const handleSubfamilyChange = (subfamily)=>{ setPreferences((prev)=>({ ...prev, subfamily })); setSelectedSubfamily(subfamily); }; const generateFormula = async ()=>{ setLoading(true); setError(null); try { let prompt; if (activeTab === "create") { prompt = `You are a professional perfumer with access to a database of modern synthetic fragrances. First, search through your database for 8-10 similar formulas that match these preferences: Description: ${preferences.description} Family: ${preferences.family}${preferences.subfamily ? ` (Subfamily: ${preferences.subfamily})` : ""} Concentration: ${preferences.concentration} Intensity: ${preferences.intensity} Style: ${preferences.style} Then, analyze these formulas to create a new, optimized formula that: 1. Uses the most successful proportion patterns from the reference formulas 2. Maintains proper ratios between top, heart, and base notes 3. Follows modern perfumery best practices for synthetic materials 4. Particularly emphasizes the characteristics of the ${preferences.subfamily || preferences.family} family Please provide a formula with Phase, Material (INCI), and Percentage. Include top, heart, and base notes. Important rules: 1. Use almost exclusively synthetic aroma chemicals and molecules (at least 90% of the formula must be synthetic materials) 2. Minimize the use of natural materials - only use them when absolutely necessary and no synthetic alternative exists 3. Focus on modern synthetic molecules like musks, woods (Iso E Super, Ambroxan), florals (Hedione, Lilial), and fruits 4. Only include commercially available raw materials suitable for perfumery at reasonable prices 5. Do not use accords or pre-made bases - break down every accord into its individual synthetic components 6. Use proper INCI names for materials 7. Include only the solvent ratio at the end (DPG, Ethanol, or a mix) 8. Include IFRA limits if applicable for any restricted materials 9. Ensure the total percentage of fragrance materials adds up correctly for the chosen concentration 10. Base your proportions on successful commercial formulas in this style Format each line as: Phase | Material (INCI) | Percentage`; } else { prompt = `You are a professional perfumer with access to a database of modern synthetic fragrances. First, analyze 3-5 similar formulas and the original fragrance: "${preferences.fragranceToClone}" Then, create a new formula that: 1. Captures the key characteristics of the target fragrance 2. Uses modern synthetic alternatives where appropriate 3. Maintains proper ratios between notes based on successful similar formulas 4. Follows current IFRA guidelines and safety standards Please provide a formula with Phase, Material (INCI), and Percentage that closely resembles the target fragrance. Include top, heart, and base notes. Important rules: 1. Use almost exclusively synthetic aroma chemicals and molecules (at least 90% of the formula must be synthetic materials) 2. Minimize the use of natural materials - only use them when absolutely necessary and no synthetic alternative exists 3. Focus on modern synthetic molecules like musks, woods (Iso E Super, Ambroxan), florals (Hedione, Lilial), and fruits 4. Only include commercially available raw materials suitable for perfumery at reasonable prices 5. Do not use accords or pre-made bases - break down every accord into its individual synthetic components 6. Use proper INCI names for materials 7. Include only the solvent ratio at the end (DPG, Ethanol, or a mix) 8. Include IFRA limits if applicable for any restricted materials 9. Focus on recreating the overall olfactory experience, not just matching individual notes 10. Base your proportions on successful commercial formulas with similar profiles Format each line as: Phase | Material (INCI) | Percentage`; } const response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to generate formula"); } handleStreamResponse(response); } catch (err) { console.error(err); setError("Failed to generate the fragrance formula. Please try again."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-purple-100 via-pink-50 to-purple-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 394, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 395, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-6", __source: { fileName: "", lineNumber: 396, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 397, columnNumber: 11 }, __self: this }, "Professional Fragrance Formula Generator"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 mb-6", __source: { fileName: "", lineNumber: 400, columnNumber: 11 }, __self: this }, "Create custom fragrance formulas using modern synthetic materials"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8 border-b", __source: { fileName: "", lineNumber: 404, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-8 py-4 text-lg font-medium transition-all duration-200 relative ${activeTab === "create" ? "text-purple-600" : "text-gray-500 hover:text-purple-600"}`, onClick: ()=>setActiveTab("create"), __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, "Create New Formula", activeTab === "create" && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-purple-600 to-pink-600", __source: { fileName: "", lineNumber: 415, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `px-8 py-4 text-lg font-medium transition-all duration-200 relative ${activeTab === "clone" ? "text-purple-600" : "text-gray-500 hover:text-purple-600"}`, onClick: ()=>setActiveTab("clone"), __source: { fileName: "", lineNumber: 418, columnNumber: 13 }, __self: this }, "Clone Existing Fragrance", activeTab === "clone" && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-purple-600 to-pink-600", __source: { fileName: "", lineNumber: 428, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-2xl shadow-xl p-6 md:p-8", __source: { fileName: "", lineNumber: 434, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 435, columnNumber: 11 }, __self: this }, activeTab === "create" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 439, columnNumber: 19 }, __self: this }, "Describe Your Desired Fragrance"), /*#__PURE__*/ React.createElement("textarea", { value: preferences.description, onChange: (e)=>setPreferences((prev)=>({ ...prev, description: e.target.value })), placeholder: "Describe the fragrance you want to create. Include notes, mood, occasion, or any specific requirements...", className: "w-full p-4 border-2 border-gray-200 rounded-xl h-32 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 442, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 455, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 456, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 457, columnNumber: 21 }, __self: this }, "Search Fragrance Families"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 460, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Search for a fragrance family or subfamily...", className: "w-full p-4 pl-12 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 461, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("svg", { className: "absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 468, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z", __source: { fileName: "", lineNumber: 474, columnNumber: 25 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 484, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 485, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 486, columnNumber: 23 }, __self: this }, "Fragrance Family"), /*#__PURE__*/ React.createElement("select", { value: preferences.family, onChange: (e)=>handleFamilyChange(e.target.value), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 489, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 494, columnNumber: 25 }, __self: this }, "Select a family"), Object.keys(filteredFamilies).map((family)=>/*#__PURE__*/ React.createElement("option", { key: family, value: family, __source: { fileName: "", lineNumber: 496, columnNumber: 27 }, __self: this }, family)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 503, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 504, columnNumber: 23 }, __self: this }, "Subfamily"), /*#__PURE__*/ React.createElement("select", { value: selectedSubfamily, onChange: (e)=>handleSubfamilyChange(e.target.value), disabled: !preferences.family, className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200 disabled:bg-gray-100", __source: { fileName: "", lineNumber: 507, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 513, columnNumber: 25 }, __self: this }, "Select a subfamily"), preferences.family && fragranceFamilies[preferences.family].map((subfamily)=>/*#__PURE__*/ React.createElement("option", { key: subfamily, value: subfamily, __source: { fileName: "", lineNumber: 517, columnNumber: 31 }, __self: this }, subfamily)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 525, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 526, columnNumber: 23 }, __self: this }, "Concentration"), /*#__PURE__*/ React.createElement("select", { value: preferences.concentration, onChange: (e)=>setPreferences((prev)=>({ ...prev, concentration: e.target.value })), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 529, columnNumber: 23 }, __self: this }, concentrations.map((conc)=>/*#__PURE__*/ React.createElement("option", { key: conc, value: conc, __source: { fileName: "", lineNumber: 540, columnNumber: 27 }, __self: this }, conc)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 547, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 548, columnNumber: 23 }, __self: this }, "Intensity"), /*#__PURE__*/ React.createElement("select", { value: preferences.intensity, onChange: (e)=>setPreferences((prev)=>({ ...prev, intensity: e.target.value })), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 551, columnNumber: 23 }, __self: this }, intensities.map((intensity)=>/*#__PURE__*/ React.createElement("option", { key: intensity, value: intensity, __source: { fileName: "", lineNumber: 562, columnNumber: 27 }, __self: this }, intensity)))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 569, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 570, columnNumber: 23 }, __self: this }, "Style"), /*#__PURE__*/ React.createElement("select", { value: preferences.style, onChange: (e)=>setPreferences((prev)=>({ ...prev, style: e.target.value })), className: "w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 573, columnNumber: 23 }, __self: this }, styles.map((style)=>/*#__PURE__*/ React.createElement("option", { key: style, value: style, __source: { fileName: "", lineNumber: 584, columnNumber: 27 }, __self: this }, style))))))) : /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 594, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-3", __source: { fileName: "", lineNumber: 595, columnNumber: 17 }, __self: this }, "Fragrance to Clone"), /*#__PURE__*/ React.createElement("textarea", { value: preferences.fragranceToClone, onChange: (e)=>setPreferences((prev)=>({ ...prev, fragranceToClone: e.target.value })), placeholder: "Enter the name and brand of the fragrance you want to clone (e.g., 'Chanel No. 5 by Chanel'). You can also add specific aspects you want to focus on...", className: "w-full p-4 border-2 border-gray-200 rounded-xl h-32 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200", __source: { fileName: "", lineNumber: 598, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-sm text-gray-500", __source: { fileName: "", lineNumber: 609, columnNumber: 17 }, __self: this }, "Note: This will create a formula inspired by the original fragrance using modern synthetic materials. The result will be similar but not identical to the original.")), /*#__PURE__*/ React.createElement("button", { onClick: generateFormula, disabled: loading || !preferences.description && !preferences.fragranceToClone, className: "w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 rounded-xl text-lg font-medium hover:from-purple-700 hover:to-pink-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-xl transform hover:-translate-y-0.5", __source: { fileName: "", lineNumber: 617, columnNumber: 13 }, __self: this }, loading ? "Generating Formula..." : activeTab === "create" ? "Generate Formula" : "Generate Clone Formula"), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-center bg-red-50 p-4 rounded-xl", __source: { fileName: "", lineNumber: 633, columnNumber: 15 }, __self: this }, error), (streamingResponse || result) && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-xl shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 639, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 border-b border-gray-200", __source: { fileName: "", lineNumber: 640, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-purple-800", __source: { fileName: "", lineNumber: 641, columnNumber: 19 }, __self: this }, "Professional Fragrance Formula")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 645, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 646, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-50", __source: { fileName: "", lineNumber: 647, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 648, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4 text-left text-xs font-medium text-purple-800 uppercase tracking-wider", __source: { fileName: "", lineNumber: 649, columnNumber: 25 }, __self: this }, "Phase"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4 text-left text-xs font-medium text-purple-800 uppercase tracking-wider", __source: { fileName: "", lineNumber: 652, columnNumber: 25 }, __self: this }, "Material (INCI)"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4 text-left text-xs font-medium text-purple-800 uppercase tracking-wider", __source: { fileName: "", lineNumber: 655, columnNumber: 25 }, __self: this }, "%"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 660, columnNumber: 21 }, __self: this }, (streamingResponse || result)?.split("\n").map((line, index)=>{ if (line.includes("|")) { const [phase, material, percentage] = line.split("|").map((item)=>item.trim()).filter(Boolean); if (phase && material && percentage) { return /*#__PURE__*/ React.createElement("tr", { key: index, className: index % 2 === 0 ? "bg-white hover:bg-purple-50 transition-colors duration-150" : "bg-gray-50 hover:bg-purple-50 transition-colors duration-150", __source: { fileName: "", lineNumber: 671, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 679, columnNumber: 35 }, __self: this }, phase), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 682, columnNumber: 35 }, __self: this }, material), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", __source: { fileName: "", lineNumber: 685, columnNumber: 35 }, __self: this }, percentage)); } } if (line.startsWith("Solvent:") || line.startsWith("IFRA:")) { return /*#__PURE__*/ React.createElement("tr", { key: index, className: "bg-purple-50", __source: { fileName: "", lineNumber: 697, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("td", { colSpan: "3", className: "px-6 py-4 text-sm text-purple-800 font-medium", __source: { fileName: "", lineNumber: 698, columnNumber: 33 }, __self: this }, line)); } return null; }))))))))); }