function Text({ text, width }) { return /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden text-ellipsis whitespace-nowrap", style: { width }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function TextStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Text, { text: "Short text", width: "150px", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Text, { text: "This is a much longer text that should be truncated with an ellipsis at the end if it exceeds the container width.", width: "300px", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent({ width = "100%", title, caption, icon, selected, onClick }) { return /*#__PURE__*/ React.createElement("div", { className: `flex p-[12px] rounded cursor-pointer`, style: { minWidth: "290px", width: width, backgroundColor: selected ? "#cddffc" : "#ffffff" }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-[12px]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${icon} text-[#545B71]`, __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Text, { text: title, width: "calc(100% - 40px)", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(Text, { text: caption, width: "calc(100% - 40px)", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "ml-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#3267D6] rounded-full w-[34px] h-[34px] flex items-center justify-center", onClick: onClick, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${selected ? "fa-minus" : "fa-plus"} text-white`, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Item 1", caption: "This is the first item.", icon: "fa-star", selected: false, onClick: ()=>{}, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { width: "300px", title: "Item 2", caption: "This is the second item with a longer caption that needs to be truncated.", icon: "fa-heart", selected: true, onClick: ()=>{}, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MainComponent, { width: "50%", title: "Item 3", caption: "Short caption.", icon: "fa-envelope", selected: false, onClick: ()=>{}, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } const jsxStyle = ` .space-y-4 div:hover { background-color: #f1f4f8; } .space-y-4 div:active { background-color: #e0ebfc; } `; /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 1 }, __self: this }, jsxStyle);