function MainComponent({ title, children, onSettingsClick, variant = "default" }) { const variants = { default: "bg-white border border-gray-200", dark: "bg-gray-800 border border-gray-700 text-white", accent: "bg-blue-50 border border-blue-200" }; return /*#__PURE__*/ React.createElement("div", { className: `rounded-lg shadow-sm ${variants[variant]} p-4 w-full`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg font-semibold", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("button", { onClick: onSettingsClick, className: "text-gray-500 hover:text-gray-700 p-2 rounded-full hover:bg-gray-100", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, children)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Default Widget", onSettingsClick: ()=>alert("Settings clicked"), __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "This is the default widget content.")), /*#__PURE__*/ React.createElement(MainComponent, { title: "Dark Widget", variant: "dark", onSettingsClick: ()=>alert("Settings clicked"), __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-32 flex items-center justify-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Dark themed content area"))), /*#__PURE__*/ React.createElement(MainComponent, { title: "Accent Widget", variant: "accent", onSettingsClick: ()=>alert("Settings clicked"), __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Accent widget with custom content")))); }