function MainComponent({ kpis, roi, innovationHorizons }) { const kpisList = kpis.map((kpi, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto", __source: { fileName: "", lineNumber: 2, columnNumber: 45 }, __self: this }, kpi)); const innovationList = innovationHorizons.map((horizon, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 69 }, __self: this }, horizon)); return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-md shadow-lg w-full max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "Análisis de Portafolio de Proyectos"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "KPI Claves de Inversión"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-6 mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, kpisList), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "ROI"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, roi), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "Horizontes de Innovación"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc ml-6", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, innovationList)); } function StoryComponent() { const kpisExample = [ "Inversión Total", "Costo por Proyecto", "Retorno de Inversión" ]; const roiExample = "25% anual"; const innovationHorizonsExample = [ "Corto Plazo", "Mediano Plazo", "Largo Plazo" ]; return /*#__PURE__*/ React.createElement("div", { className: "p-10 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { kpis: kpisExample, roi: roiExample, innovationHorizons: innovationHorizonsExample, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); }