function MainComponent({ segments }) { const totalValue = segments.reduce((acc, segment)=>acc + segment.value, 0); let cumulativeValue = 25; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[120px] h-[120px]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 32 32", className: "w-full h-full", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, segments.map((segment, index)=>{ const dashArrayValue = segment.value / totalValue * 100; const element = /*#__PURE__*/ React.createElement("circle", { key: index, cx: "16", cy: "16", r: "12.5", fill: "transparent", stroke: segment.color, strokeWidth: "5", strokeDasharray: `${dashArrayValue} ${100 - dashArrayValue}`, strokeDashoffset: cumulativeValue, transform: "rotate(-90) translate(-32)", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }); cumulativeValue += dashArrayValue; return element; })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[76px] h-[76px] bg-white rounded-full", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, segments.map((segment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-1", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-3 h-3 mr-2 inline-block rounded-full", style: { backgroundColor: segment.color }, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, segment.name))))); } function StoryComponent() { const segmentsData = [ { name: 'Segment A', value: 30, color: '#4F8EF7' }, { name: 'Segment B', value: 30, color: '#50ABF1' }, { name: 'Segment C', value: 40, color: '#72C3FC' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { segments: segmentsData, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); }