@erpsquad/common 1.8.46 → 1.8.48

package/dist/components/charts/donut-chart/donut-chart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  colors ?:Array<string>;\n  titleProps?:any\n  valueProps?:any \n  isUserDashbord ?: boolean \n  totalUsers ? : any \n}\n\nconst defaultColors = [\n  \"#5BCE97\",\n  \"#B3D8E2\",\n  \"#F5F6F5\",\n  \"#AE6B9E\",\n  \"#CBD49A\",\n  \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n  isUserDashbord  , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n  totalUsers ,  \n\ttotal =  isUserDashbord ? totalUsers : \"2.4 GB\",\n  colors = defaultColors,\n  titleProps={},\n  valueProps={}, \n\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    //@ts-expect-error not applicable\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n    const pies = g\n      .selectAll(\".arc\")\n      //@ts-expect-error not applicable\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n    pies\n      .append(\"path\")\n      //@ts-expect-error not applicable\n      .attr(\"d\", path)\n      //@ts-expect-error not applicable\n      .attr(\"fill\", (d: DataPoint, i: number) => {\n        return colors[i % colors.length]});\n\n\n    // const words = total.split(' '); // Split the text into words\n    // const lineHeight = 22; // Define the line height\n    // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n    // let currentLine = '';\n    // let lineNumber = 0;\n\n    // const textElement =\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    // .text(total);\n\n    // words.forEach((word) => {\n    // \tconst tempLine = currentLine + word + ' ';\n\n    // \t// Check if the line exceeds the max character count\n    // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n    // \t\ttextElement\n    // \t\t\t.append('tspan')\n    // \t\t\t.attr('x', 0)\n    // \t\t\t.attr('y', lineHeight * lineNumber)\n    // \t\t\t.text(currentLine.trim());\n\n    // \t\tcurrentLine = word + ' ';\n    // \t\tlineNumber++;\n    // \t} else {\n    // \t\tcurrentLine = tempLine;\n    // \t}\n    // });\n\n    // // Add the last line\n    // textElement\n    // \t.append('tspan')\n    // \t.attr('x', 0)\n    // \t.attr('y', lineHeight * lineNumber)\n    // \t.text(currentLine.trim());\n  }, [colors, data, height, total, width]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n        <div className=\"donut-chart-legend\">\n          {data && data.map((d: DataPoint, i: number) => {\n            return (\n              <div\n                className=\"legend\"\n                key={d.label}\n                style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n              >\n                <div className=\"legend-title\">\n                <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n                  {d.label}\n                </Typography>\n                  </div>\n                <div className=\"legend-value\">\n                  <Typography\n                    type=\"s5\"\n                    weight=\"medium\"\n                    color=\"theme.secondary.1000\"\n                  >\n                    <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n                      {d.value}\n                    </Typography>\n                  </Typography>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  colors ?:Array<string>;\n  titleProps?:any\n  valueProps?:any \n  isUserDashbord ?: boolean \n  totalUsers ? : any \n}\n\nconst defaultColors = [\n  \"#5BCE97\",\n  \"#B3D8E2\",\n  \"#F5F6F5\",\n  \"#AE6B9E\",\n  \"#CBD49A\",\n  \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nexport const DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n  isUserDashbord  , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n  totalUsers ,  \n\ttotal =  isUserDashbord ? totalUsers : \"2.4 GB\",\n  colors = defaultColors,\n  titleProps={},\n  valueProps={}, \n\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    //@ts-expect-error not applicable\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n    const pies = g\n      .selectAll(\".arc\")\n      //@ts-expect-error not applicable\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n    pies\n      .append(\"path\")\n      //@ts-expect-error not applicable\n      .attr(\"d\", path)\n      //@ts-expect-error not applicable\n      .attr(\"fill\", (d: DataPoint, i: number) => {\n        return colors[i % colors.length]});\n\n\n    // const words = total.split(' '); // Split the text into words\n    // const lineHeight = 22; // Define the line height\n    // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n    // let currentLine = '';\n    // let lineNumber = 0;\n\n    // const textElement =\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    // .text(total);\n\n    // words.forEach((word) => {\n    // \tconst tempLine = currentLine + word + ' ';\n\n    // \t// Check if the line exceeds the max character count\n    // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n    // \t\ttextElement\n    // \t\t\t.append('tspan')\n    // \t\t\t.attr('x', 0)\n    // \t\t\t.attr('y', lineHeight * lineNumber)\n    // \t\t\t.text(currentLine.trim());\n\n    // \t\tcurrentLine = word + ' ';\n    // \t\tlineNumber++;\n    // \t} else {\n    // \t\tcurrentLine = tempLine;\n    // \t}\n    // });\n\n    // // Add the last line\n    // textElement\n    // \t.append('tspan')\n    // \t.attr('x', 0)\n    // \t.attr('y', lineHeight * lineNumber)\n    // \t.text(currentLine.trim());\n  }, [colors, data, height, total, width]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n        <div className=\"donut-chart-legend\">\n          {data && data.map((d: DataPoint, i: number) => {\n            return (\n              <div\n                className=\"legend\"\n                key={d.label}\n                style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n              >\n                <div className=\"legend-title\">\n                <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n                  {d.label}\n                </Typography>\n                  </div>\n                <div className=\"legend-value\">\n                  <Typography\n                    type=\"s5\"\n                    weight=\"medium\"\n                    color=\"theme.secondary.1000\"\n                  >\n                    <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n                      {d.value}\n                    </Typography>\n                  </Typography>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc"],"mappings":"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"}

package/dist/components/charts/donut-chart/donut-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  colors ?:Array<string>;\n  titleProps?:any\n  valueProps?:any \n  isUserDashbord ?: boolean \n  totalUsers ? : any \n}\n\nconst defaultColors = [\n  \"#5BCE97\",\n  \"#B3D8E2\",\n  \"#F5F6F5\",\n  \"#AE6B9E\",\n  \"#CBD49A\",\n  \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n  isUserDashbord  , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n  totalUsers ,  \n\ttotal =  isUserDashbord ? totalUsers : \"2.4 GB\",\n  colors = defaultColors,\n  titleProps={},\n  valueProps={}, \n\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    //@ts-expect-error not applicable\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n    const pies = g\n      .selectAll(\".arc\")\n      //@ts-expect-error not applicable\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n    pies\n      .append(\"path\")\n      //@ts-expect-error not applicable\n      .attr(\"d\", path)\n      //@ts-expect-error not applicable\n      .attr(\"fill\", (d: DataPoint, i: number) => {\n        return colors[i % colors.length]});\n\n\n    // const words = total.split(' '); // Split the text into words\n    // const lineHeight = 22; // Define the line height\n    // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n    // let currentLine = '';\n    // let lineNumber = 0;\n\n    // const textElement =\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    // .text(total);\n\n    // words.forEach((word) => {\n    // \tconst tempLine = currentLine + word + ' ';\n\n    // \t// Check if the line exceeds the max character count\n    // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n    // \t\ttextElement\n    // \t\t\t.append('tspan')\n    // \t\t\t.attr('x', 0)\n    // \t\t\t.attr('y', lineHeight * lineNumber)\n    // \t\t\t.text(currentLine.trim());\n\n    // \t\tcurrentLine = word + ' ';\n    // \t\tlineNumber++;\n    // \t} else {\n    // \t\tcurrentLine = tempLine;\n    // \t}\n    // });\n\n    // // Add the last line\n    // textElement\n    // \t.append('tspan')\n    // \t.attr('x', 0)\n    // \t.attr('y', lineHeight * lineNumber)\n    // \t.text(currentLine.trim());\n  }, [colors, data, height, total, width]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n        <div className=\"donut-chart-legend\">\n          {data && data.map((d: DataPoint, i: number) => {\n            return (\n              <div\n                className=\"legend\"\n                key={d.label}\n                style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n              >\n                <div className=\"legend-title\">\n                <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n                  {d.label}\n                </Typography>\n                  </div>\n                <div className=\"legend-value\">\n                  <Typography\n                    type=\"s5\"\n                    weight=\"medium\"\n                    color=\"theme.secondary.1000\"\n                  >\n                    <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n                      {d.value}\n                    </Typography>\n                  </Typography>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["defaultColors","DonutChart","data","height","width","isUserDashbord","legend","direction","totalUsers","total","colors","titleProps","valueProps","svgRef","useRef","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","path","d3.arc","enter","i","length","html","children","jsxs","className","jsx","ref","map","style","borderLeft","Typography","type","color","label","weight"],"mappings":"kaAwBA,MAAMA,EAAgB,CACpB,UACA,UACA,UACA,UACA,UACA,WAWIC,EAAwC,EAC7CC,OACAC,SAAS,IACTC,QAAQ,IACPC,iBACDC,UAAS,EACTC,YAAY,aACXC,aACDC,SAASJ,EAAiBG,EAAa,UACtCE,SAASV,EACTW,aAAW,CAAA,EACXC,aAAW,CAAA,MAGX,MAAMC,EAASC,EAAAA,OAAsB,MAmFrC,OAjFAC,EAAAA,UAAU,KACR,IAAKF,EAAOG,QAAS,OAErB,MAAMC,EAAMC,EAAAA,QAAUL,EAAOG,SAE7BC,EAAIE,UAAU,KAAKC,SAEnB,MAEMC,EAAcC,KAAKC,IAAInB,EAAOD,GAAU,EAF/B,EAGTqB,EAAcF,KAAKC,IAAInB,EAAOD,GAAU,EAAIsB,GAE5CC,EAAIT,EACPU,OAAO,KACPC,KAAK,YAAa,aAAaxB,EAAQ,MAAMD,EAAS,MAEnD0B,EAAMC,EAAAA,UAETC,MAAOC,GA1CoB,CAACC,IACjC,GAAmB,iBAARA,EACT,OAAOA,EAET,MAAMC,GAAQ,MAAAD,OAAA,EAAAA,EAAKC,MAAM,UAAW,KACpC,OAAOA,EAAQC,OAAOD,EAAM,IAAM,GAqCLE,CAA0BJ,EAAED,QAEjDM,EAAOC,EAAAA,UAASjB,YAAYA,GAAaG,YAAYA,GAE9CE,EACVP,UAAU,QAEVjB,KAAK2B,EAAI3B,IACTqC,QACAZ,OAAO,KACPC,KAAK,QAAS,OAGdD,OAAO,QAEPC,KAAK,IAAKS,GAEVT,KAAK,OAAQ,CAACI,EAAcQ,IACpB9B,EAAO8B,EAAI9B,EAAO+B,SAW7Bf,EAAEC,OAAO,QACNC,KAAK,cAAe,UACpBA,KAAK,YAAa,QAClBA,KAAK,cAAe,OACpBA,KAAK,qBAAsB,WAC3Bc,KAAKjC,IA2BP,CAACC,EAAQR,EAAMC,EAAQM,EAAOL,IAE5BE,mCAMDqC,wBAAAC,EAAAA,KAAC,MAAA,CAAIC,UAAW,yBAAyBtC,IACvCoC,SAAA;eAAAG,EAAAA,IAAC,OACCH,wBAAAG,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD;eAElC2C,EAAAA,IAAC,OAAID,UAAU,qBACZF,YAAQzC,EAAK8C,IAAI,CAAChB,EAAcQ,mBAE7BI,EAAAA,KAAC,MAAA,CACCC,UAAU,SAEVI,MAAO,CAAEC,WAAY,kBAAkBxC,EAAO8B,MAE9CG,SAAA;eAAAG,EAAAA,IAAC,MAAA,CAAID,UAAU,eACfF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,yBAA0B1C,EACnDgC,SAAAX,EAAEsB;iBAGLR,IAAC,MAAA,CAAID,UAAU,eACbF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CACCC,KAAK,KACLG,OAAO,SACPF,MAAM,uBAENV,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,uBAAuBE,OAAO,UAAW3C,EAClE+B,SAAAX,EAAED,cAfJC,EAAEsB,8BAdZR,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donut-chart/donut-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  colors ?:Array<string>;\n  titleProps?:any\n  valueProps?:any \n  isUserDashbord ?: boolean \n  totalUsers ? : any \n}\n\nconst defaultColors = [\n  \"#5BCE97\",\n  \"#B3D8E2\",\n  \"#F5F6F5\",\n  \"#AE6B9E\",\n  \"#CBD49A\",\n  \"#EEE0B3\",\n];\n\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nexport const DonutChart: React.FC<DonutChartProps> = ({\n\tdata,\n\theight = 140,\n\twidth = 140,\n  isUserDashbord  , \n\tlegend = true,\n\tdirection = 'horizontal' ,\n  totalUsers ,  \n\ttotal =  isUserDashbord ? totalUsers : \"2.4 GB\",\n  colors = defaultColors,\n  titleProps={},\n  valueProps={}, \n\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    const innerRadius = Math.min(width, height) / 2 - margin * 2;\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    //@ts-expect-error not applicable\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value));\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);\n\n    const pies = g\n      .selectAll(\".arc\")\n      //@ts-expect-error not applicable\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n    pies\n      .append(\"path\")\n      //@ts-expect-error not applicable\n      .attr(\"d\", path)\n      //@ts-expect-error not applicable\n      .attr(\"fill\", (d: DataPoint, i: number) => {\n        return colors[i % colors.length]});\n\n\n    // const words = total.split(' '); // Split the text into words\n    // const lineHeight = 22; // Define the line height\n    // const maxCharsPerLine = 15; // Define the maximum number of characters per line\n\n    // let currentLine = '';\n    // let lineNumber = 0;\n\n    // const textElement =\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    // .text(total);\n\n    // words.forEach((word) => {\n    // \tconst tempLine = currentLine + word + ' ';\n\n    // \t// Check if the line exceeds the max character count\n    // \tif (tempLine.length > maxCharsPerLine && currentLine.length > 0) {\n    // \t\ttextElement\n    // \t\t\t.append('tspan')\n    // \t\t\t.attr('x', 0)\n    // \t\t\t.attr('y', lineHeight * lineNumber)\n    // \t\t\t.text(currentLine.trim());\n\n    // \t\tcurrentLine = word + ' ';\n    // \t\tlineNumber++;\n    // \t} else {\n    // \t\tcurrentLine = tempLine;\n    // \t}\n    // });\n\n    // // Add the last line\n    // textElement\n    // \t.append('tspan')\n    // \t.attr('x', 0)\n    // \t.attr('y', lineHeight * lineNumber)\n    // \t.text(currentLine.trim());\n  }, [colors, data, height, total, width]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n        <div className=\"donut-chart-legend\">\n          {data && data.map((d: DataPoint, i: number) => {\n            return (\n              <div\n                className=\"legend\"\n                key={d.label}\n                style={{ borderLeft: `0.188rem solid ${colors[i]}` }}\n              >\n                <div className=\"legend-title\">\n                <Typography type=\"s5\" color=\"theme.secondary.800\" {...titleProps}>\n                  {d.label}\n                </Typography>\n                  </div>\n                <div className=\"legend-value\">\n                  <Typography\n                    type=\"s5\"\n                    weight=\"medium\"\n                    color=\"theme.secondary.1000\"\n                  >\n                    <Typography type=\"s5\" color=\"theme.secondary.1000\" weight=\"bold\" {...valueProps}>\n                      {d.value}\n                    </Typography>\n                  </Typography>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default DonutChart;\n"],"names":["defaultColors","DonutChart","data","height","width","isUserDashbord","legend","direction","totalUsers","total","colors","titleProps","valueProps","svgRef","useRef","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","path","d3.arc","enter","i","length","html","children","jsxs","className","jsx","ref","map","style","borderLeft","Typography","type","color","label","weight"],"mappings":"kaAwBA,MAAMA,EAAgB,CACpB,UACA,UACA,UACA,UACA,UACA,WAWWC,EAAwC,EACpDC,OACAC,SAAS,IACTC,QAAQ,IACPC,iBACDC,UAAS,EACTC,YAAY,aACXC,aACDC,SAASJ,EAAiBG,EAAa,UACtCE,SAASV,EACTW,aAAW,CAAA,EACXC,aAAW,CAAA,MAGX,MAAMC,EAASC,EAAAA,OAAsB,MAmFrC,OAjFAC,EAAAA,UAAU,KACR,IAAKF,EAAOG,QAAS,OAErB,MAAMC,EAAMC,EAAAA,QAAUL,EAAOG,SAE7BC,EAAIE,UAAU,KAAKC,SAEnB,MAEMC,EAAcC,KAAKC,IAAInB,EAAOD,GAAU,EAF/B,EAGTqB,EAAcF,KAAKC,IAAInB,EAAOD,GAAU,EAAIsB,GAE5CC,EAAIT,EACPU,OAAO,KACPC,KAAK,YAAa,aAAaxB,EAAQ,MAAMD,EAAS,MAEnD0B,EAAMC,EAAAA,UAETC,MAAOC,GA1CoB,CAACC,IACjC,GAAmB,iBAARA,EACT,OAAOA,EAET,MAAMC,GAAQ,MAAAD,OAAA,EAAAA,EAAKC,MAAM,UAAW,KACpC,OAAOA,EAAQC,OAAOD,EAAM,IAAM,GAqCLE,CAA0BJ,EAAED,QAEjDM,EAAOC,EAAAA,UAASjB,YAAYA,GAAaG,YAAYA,GAE9CE,EACVP,UAAU,QAEVjB,KAAK2B,EAAI3B,IACTqC,QACAZ,OAAO,KACPC,KAAK,QAAS,OAGdD,OAAO,QAEPC,KAAK,IAAKS,GAEVT,KAAK,OAAQ,CAACI,EAAcQ,IACpB9B,EAAO8B,EAAI9B,EAAO+B,SAW7Bf,EAAEC,OAAO,QACNC,KAAK,cAAe,UACpBA,KAAK,YAAa,QAClBA,KAAK,cAAe,OACpBA,KAAK,qBAAsB,WAC3Bc,KAAKjC,IA2BP,CAACC,EAAQR,EAAMC,EAAQM,EAAOL,IAE5BE,mCAMDqC,wBAAAC,EAAAA,KAAC,MAAA,CAAIC,UAAW,yBAAyBtC,IACvCoC,SAAA;eAAAG,EAAAA,IAAC,OACCH,wBAAAG,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD;eAElC2C,EAAAA,IAAC,OAAID,UAAU,qBACZF,YAAQzC,EAAK8C,IAAI,CAAChB,EAAcQ,mBAE7BI,EAAAA,KAAC,MAAA,CACCC,UAAU,SAEVI,MAAO,CAAEC,WAAY,kBAAkBxC,EAAO8B,MAE9CG,SAAA;eAAAG,EAAAA,IAAC,MAAA,CAAID,UAAU,eACfF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,yBAA0B1C,EACnDgC,SAAAX,EAAEsB;iBAGLR,IAAC,MAAA,CAAID,UAAU,eACbF,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CACCC,KAAK,KACLG,OAAO,SACPF,MAAM,uBAENV,wBAAAG,EAAAA,IAACK,EAAAA,WAAA,CAAWC,KAAK,KAAKC,MAAM,uBAAuBE,OAAO,UAAW3C,EAClE+B,SAAAX,EAAED,cAfJC,EAAEsB,8BAdZR,EAAAA,IAAC,MAAA,CAAIC,IAAKlC,EAAQT,QAAcD"}

package/dist/components/charts/donut-chart/donut-chart.d.ts

@@ -17,6 +17,5 @@ interface DonutChartProps {
     isUserDashbord?: boolean;
     totalUsers?: any;
 }
-declare const DonutChart: React.FC<DonutChartProps>;
-export { DonutChart };
+export declare const DonutChart: React.FC<DonutChartProps>;
 export default DonutChart;

package/dist/components/charts/donutChart/DonutChart/index.esm.js

@@ -0,0 +1,97 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+/* empty css                            */
+import { Typography } from "../../../typography/typography/index.esm.js";
+import { useAuth } from "../../../../hooks/useAuth/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import pie from "../../../../node_modules/d3-shape/src/pie/index.esm.js";
+import arc from "../../../../node_modules/d3-shape/src/arc/index.esm.js";
+const formatNumber = (num, defaultCurrencySymbol = "") => {
+  if (num >= 1e6) {
+    return `${defaultCurrencySymbol} ${(num / 1e6).toFixed(1)} M`;
+  } else if (num >= 1e5) {
+    return `${defaultCurrencySymbol} ${(num / 1e5).toFixed(1)} L`;
+  } else if (num >= 1e3) {
+    return `${(num / 1e3).toFixed(1)} K`;
+  } else {
+    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;
+  }
+};
+const getSingleNumberFromString = (str) => {
+  if (typeof str === "number") {
+    return str;
+  }
+  const match = (str == null ? void 0 : str.match(/\d.+/)) || null;
+  return match ? Number(match[0]) : 0;
+};
+const DonutChart = ({
+  data,
+  height = 140,
+  width = 140,
+  legend = true,
+  direction = "vertical",
+  total = "300",
+  donutThickerValue,
+  CustomLegends,
+  title = ""
+}) => {
+  var _a;
+  const svgRef = useRef(null);
+  const { user } = useAuth();
+  const defaultCurrencySymbol = ((_a = user == null ? void 0 : user.currency_data) == null ? void 0 : _a.symbol) || "";
+  useEffect(() => {
+    if (!svgRef.current) return;
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const margin = 6;
+    const outerRadius = Math.min(width, height) / 2 - margin;
+    let innerRadius = Math.min(width, height) / 2 - margin * 2;
+    if (donutThickerValue) {
+      innerRadius = outerRadius - donutThickerValue;
+    }
+    const g = svg.append("g").attr("transform", `translate(${width / 2}, ${height / 2})`);
+    const pie$1 = pie().value((d) => getSingleNumberFromString(d.value)).padAngle(0);
+    const path = arc().outerRadius(outerRadius).innerRadius(innerRadius);
+    const pies = g.selectAll(".arc").data(pie$1(data)).enter().append("g").attr("class", "arc");
+    pies.append("path").attr("d", path).attr("fill", (d) => {
+      var _a2;
+      return (_a2 = d == null ? void 0 : d.data) == null ? void 0 : _a2.color;
+    }).attr("stroke", "none");
+    g.append("text").attr("text-anchor", "middle").attr("font-size", "18px").attr("font-weight", "600").attr("alignment-baseline", `central`).html(total);
+    g.append("text").attr("text-anchor", "middle").attr("maring-top", "20px").attr("font-size", "13px").attr("font-weight", "600").attr("dy", "2em").attr("color", "#7B7C7F").html(title);
+  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);
+  if (!legend) {
+    return /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `donut-chart-container ${direction}`, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width, height }) }),
+    CustomLegends ? /* @__PURE__ */ jsx(CustomLegends, { data }) : /* @__PURE__ */ jsx("div", { className: "donut-legend", children: /* @__PURE__ */ jsx("div", { className: `donut-chart-legend ${direction}`, children: data.map((d) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "legend",
+        style: { borderLeft: `0.188rem solid ${d.color}` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "legend-title", style: { color: `${d.labelColor}` }, children: d.label }),
+          /* @__PURE__ */ jsx("div", { className: "legend-value", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              type: "s5",
+              weight: "medium",
+              color: d.valueColor,
+              style: {
+                whiteSpace: "nowrap"
+              },
+              children: formatNumber(d.value, defaultCurrencySymbol)
+            }
+          ) })
+        ]
+      },
+      d.label
+    )) }) })
+  ] }) });
+};
+export {
+  DonutChart,
+  DonutChart as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/donutChart/DonutChart/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\n  }\n};\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["d3.select","pie","d3.pie","d3.arc","_a"],"mappings":"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"}

package/dist/components/charts/donutChart/DonutChart/index.js

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react");;/* empty css                         */var r=,/* empty css                                    */a=,/* empty css                               */l=,/* empty css                                                      */n=,/* empty css                                               */s=;/* empty css                                               */const d=(e,t="")=>e>=1e6?`${t} ${(e/1e6).toFixed(1)} M`:e>=1e5?`${t} ${(e/1e5).toFixed(1)} L`:e>=1e3?`${(e/1e3).toFixed(1)} K`:`${t} ${e.toFixed(2)}`,i=({data:i,height:o=140,width:u=140,legend:c=!0,direction:h="vertical",total:p="300",donutThickerValue:x,CustomLegends:m,title:v=""})=>{var g;const f=t.useRef(null),{user:j}=a.useAuth(),y=(null==(g=null==j?void 0:j.currency_data)?void 0:g.symbol)||"";return t.useEffect(()=>{if(!f.current)return;const e=l.default(f.current);e.selectAll("*").remove();const t=Math.min(u,o)/2-6;let r=Math.min(u,o)/2-12;x&&(r=t-x);const a=e.append("g").attr("transform",`translate(${u/2}, ${o/2})`),d=n.default().value(e=>(e=>{if("number"==typeof e)return e;const t=(null==e?void 0:e.match(/\d.+/))||null;return t?Number(t[0]):0})(e.value)).padAngle(0),c=s.default().outerRadius(t).innerRadius(r);a.selectAll(".arc").data(d(i)).enter().append("g").attr("class","arc").append("path").attr("d",c).attr("fill",e=>{var t;return null==(t=null==e?void 0:e.data)?void 0:t.color}).attr("stroke","none"),a.append("text").attr("text-anchor","middle").attr("font-size","18px").attr("font-weight","600").attr("alignment-baseline","central").html(p),a.append("text").attr("text-anchor","middle").attr("maring-top","20px").attr("font-size","13px").attr("font-weight","600").attr("dy","2em").attr("color","#7B7C7F").html(v)},[i,o,p,u,y,x,m,v]),c?/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsxs("div",{className:`donut-chart-container ${h}`,children:[
+/* @__PURE__ */e.jsx("div",{children:/* @__PURE__ */e.jsx("svg",{ref:f,width:u,height:o})}),m?/* @__PURE__ */e.jsx(m,{data:i}):/* @__PURE__ */e.jsx("div",{className:"donut-legend",children:/* @__PURE__ */e.jsx("div",{className:`donut-chart-legend ${h}`,children:i.map(t=>/* @__PURE__ */e.jsxs("div",{className:"legend",style:{borderLeft:`0.188rem solid ${t.color}`},children:[
+/* @__PURE__ */e.jsx("div",{className:"legend-title",style:{color:`${t.labelColor}`},children:t.label}),
+/* @__PURE__ */e.jsx("div",{className:"legend-value",children:/* @__PURE__ */e.jsx(r.Typography,{type:"s5",weight:"medium",color:t.valueColor,style:{whiteSpace:"nowrap"},children:d(t.value,y)})})]},t.label))})})]})}):/* @__PURE__ */e.jsx("svg",{ref:f,width:u,height:o})};exports.DonutChart=i,exports.default=i;
+//# sourceMappingURL=index.js.map

package/dist/components/charts/donutChart/DonutChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/donutChart/DonutChart.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as d3 from \"d3\";\nimport \"./donut-chart.scss\";\nimport Typography from \"../../typography/typography\";\nimport { useAuth } from \"../../../hooks/useAuth\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n\n}\n\ninterface DonutChartProps {\n  data: DataPoint[];\n  width?: number;\n  height?: number;\n  legend?: boolean;\n  direction?: \"vertical\" | \"horizontal\";\n  total?: string;\n  donutThickerValue?: number\n  CustomLegends?: React.FC<{ data: DataPoint[] }>;\n  title: string\n}\n\nconst formatNumber = (num: number, defaultCurrencySymbol: string = ''): string => {\n  if (num >= 1_000_000) {\n    return `${defaultCurrencySymbol} ${(num / 1_000_000).toFixed(1)} M`;\n  } else if (num >= 100_000) {\n    return `${defaultCurrencySymbol} ${(num / 100_000).toFixed(1)} L`; // L for Lakhs\n  } else if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1)} K`;\n  } else {\n    return `${defaultCurrencySymbol} ${num.toFixed(2)}`;\n  }\n};\nconst getSingleNumberFromString = (str) => {\n  if (typeof str === \"number\") {\n    return str;\n  }\n  const match = str?.match(/\\d.+/) || null;\n  return match ? Number(match[0]) : 0;\n};\n\nconst DonutChart: React.FC<DonutChartProps> = ({\n  data,\n  height = 140,\n  width = 140,\n  legend = true,\n  direction = \"vertical\",\n  total = \"300\",\n  donutThickerValue,\n  CustomLegends,\n  title = ''\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const { user } = useAuth();\n  const defaultCurrencySymbol = user?.currency_data?.symbol || '';\n  useEffect(() => {\n    if (!svgRef.current) return;\n\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = 6;\n\n    const outerRadius = Math.min(width, height) / 2 - margin;\n    let innerRadius = Math.min(width, height) / 2 - margin * 2;\n    if (donutThickerValue) {\n      innerRadius = outerRadius - donutThickerValue;\n    }\n\n\n\n\n    const g = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${width / 2}, ${height / 2})`);\n    const pie = d3\n      .pie()\n      .value((d: DataPoint) => getSingleNumberFromString(d.value)).padAngle(0);\n\n    const path = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius)\n\n    const pies = g\n      .selectAll(\".arc\")\n      .data(pie(data))\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");\n\n\n    pies\n      .append(\"path\")\n      .attr(\"d\", path)\n      .attr(\"fill\", (d: DataPoint) => d?.data?.color).attr(\"stroke\", \"none\");\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr(\"font-size\", \"18px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"alignment-baseline\", `central`)\n      .html(total);\n    g.append(\"text\")\n      .attr(\"text-anchor\", \"middle\")\n      .attr('maring-top', \"20px\")\n      .attr(\"font-size\", \"13px\")\n      .attr(\"font-weight\", \"600\")\n      .attr(\"dy\", \"2em\")\n      .attr(\"color\", \"#7B7C7F\")\n      .html(title);\n\n  }, [data, height, total, width, defaultCurrencySymbol, donutThickerValue, CustomLegends, title]);\n\n  if (!legend) {\n    return <svg ref={svgRef} width={width} height={height}></svg>;\n  }\n\n  return (\n    <>\n      <div className={`donut-chart-container ${direction}`}>\n        <div>\n          <svg ref={svgRef} width={width} height={height}></svg>\n        </div>\n\n\n        {CustomLegends ? (\n          <CustomLegends data={data} /> // Render the custom component\n        ) : (\n          <div className='donut-legend'>\n            <div className={`donut-chart-legend ${direction}`}>\n              {data.map((d: DataPoint) => (\n                <div\n                  className=\"legend\"\n                  key={d.label}\n                  style={{ borderLeft: `0.188rem solid ${d.color}` }}\n                >\n                  <div className=\"legend-title\" style={{ color: `${d.labelColor}` }}>{d.label}</div>\n                  <div className=\"legend-value\">\n                    <Typography\n                      type=\"s5\"\n                      weight=\"medium\"\n                      color={d.valueColor}\n                      style={{\n                        whiteSpace: 'nowrap'\n                      }}\n                    >\n                      {formatNumber(d.value, defaultCurrencySymbol)}\n                    </Typography>\n                  </div>\n                </div>\n              ))\n              }\n            </div>\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport { DonutChart };\nexport default DonutChart;\n"],"names":["formatNumber","num","defaultCurrencySymbol","toFixed","DonutChart","data","height","width","legend","direction","total","donutThickerValue","CustomLegends","title","svgRef","useRef","user","useAuth","_a","currency_data","symbol","useEffect","current","svg","d3.select","selectAll","remove","outerRadius","Math","min","innerRadius","margin","g","append","attr","pie","d3.pie","value","d","str","match","Number","getSingleNumberFromString","padAngle","path","d3.arc","enter","color","html","children","jsxs","className","jsx","ref","map","style","borderLeft","labelColor","label","Typography","type","weight","valueColor","whiteSpace"],"mappings":"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"}

package/dist/components/charts/index.d.ts

@@ -2,8 +2,19 @@ export { default as AreaLineChart } from './areaLinerChart';
 export * from './areaLinerChart';
 export { default as ChartLegends } from './ChartLegends';
 export * from './ChartLegends';
+export { default as BarChart } from './bar-chart/bar-chart';
 export * from './bar-chart';
+export { default as AdvancedBarChart } from './barChart/barChart';
+export * from './barChart';
+export { default as BarLineChart } from './barLineChart/barLinechart';
 export * from './barLineChart';
+export { default as DonutChart } from './donut-chart/donut-chart';
 export * from './donut-chart';
+export { default as AdvancedDonutChart } from './donutChart/DonutChart';
+export * from './donutChart';
+export { default as GroupedBarChart } from './groupBarChart/GroupBarChart';
 export * from './groupBarChart';
+export { default as LineChart } from './line-chart/line-chart';
+export * from './line-chart';
+export { default as MultiLineChart } from './multiLineChart/multi-line-chart';
 export * from './multiLineChart';

package/dist/components/charts/line-chart/area-lineChart/index.esm.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
+import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
+import area from "../../../../node_modules/d3-shape/src/area/index.esm.js";
+const AreaLineChartTwo = ({
+  data,
+  width = "100%",
+  // Default to responsive width
+  height = 200,
+  // Set a default numeric height
+  lineColor = "#ADE7CB",
+  lineFillColor = "#EBF9F2",
+  ...rest
+}) => {
+  const svgRef = useRef(null);
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.clientWidth);
+      }
+    });
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+      setContainerWidth(containerRef.current.clientWidth);
+    }
+    return () => resizeObserver.disconnect();
+  }, []);
+  useEffect(() => {
+    if (containerWidth === 0) return;
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const margin = { top: 5, left: 0, right: 0 };
+    const chartWidth = containerWidth - margin.left - margin.right;
+    const chartHeight = height;
+    const x = linear().domain([0, data.length - 1]).range([0, chartWidth]);
+    const y = linear().domain([0, max(data, (d) => d.value) || 1]).range([chartHeight, 0]);
+    const line$1 = line().x((_, i) => x(i)).y((d) => y(d.value));
+    const area$1 = area().x((_, i) => x(i)).y0(chartHeight).y1((d) => y(d.value));
+    const chart = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    chart.append("path").datum(data).attr("class", "line").attr("d", line$1).style("fill", "none").style("stroke", lineColor).style("stroke-width", 5);
+    chart.append("path").datum(data).attr("class", "area").attr("d", area$1).style("fill", lineFillColor);
+    chart.selectAll(".domain").remove();
+    chart.selectAll(".tick line").remove();
+  }, [data, height, lineColor, lineFillColor, containerWidth]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width, height }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height: "100%", ...rest }) });
+};
+export {
+  AreaLineChartTwo as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/line-chart/area-lineChart/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/line-chart/area-lineChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  width?: number | string; // Accept string for percentage width\n  height?: number | string;\n  lineColor?: string;\n  lineFillColor?: string;\n}\n\nconst AreaLineChartTwo: React.FC<LineChartProps> = ({\n  data,\n  width = \"100%\", // Default to responsive width\n  height = 200, // Set a default numeric height\n  lineColor = \"#ADE7CB\",\n  lineFillColor = \"#EBF9F2\",\n  ...rest\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null); // Reference to the container\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useEffect(() => {\n    // Set up ResizeObserver to track container width\n    const resizeObserver = new ResizeObserver(() => {\n      if (containerRef.current) {\n        setContainerWidth(containerRef.current.clientWidth);\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n      setContainerWidth(containerRef.current.clientWidth);\n    }\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (containerWidth === 0) return; // Skip rendering until we have a valid width\n\n    const svg = d3.select(svgRef.current);\n    svg.selectAll(\"*\").remove(); // Clear previous content\n\n    const margin = { top: 5, left: 0, right: 0, bottom: 5 };\n    const chartWidth = containerWidth - margin.left - margin.right; // Use container width\n    const chartHeight = height as number;\n\n    const x = d3\n      .scaleLinear()\n      .domain([0, data.length - 1])\n      .range([0, chartWidth]);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: DataPoint) => d.value) || 1]) // Fallback for empty data\n      .range([chartHeight, 0]);\n\n    const line = d3\n      .line<DataPoint>()\n      .x((_, i) => x(i))\n      .y((d) => y(d.value));\n\n    const area = d3\n      .area<DataPoint>()\n      .x((_, i) => x(i))\n      .y0(chartHeight)\n      .y1((d) => y(d.value));\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", lineColor)\n      .style(\"stroke-width\", 5);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"area\")\n      .attr(\"d\", area)\n      .style(\"fill\", lineFillColor);\n\n    chart.selectAll(\".domain\").remove();\n    chart.selectAll(\".tick line\").remove();\n  }, [data, height, lineColor, lineFillColor, containerWidth]);\n\n  return (\n    <div ref={containerRef} style={{ width: width, height: height }}>\n      <svg ref={svgRef} width=\"100%\" height=\"100%\" {...rest}></svg>\n    </div>\n  );\n};\n\nexport default AreaLineChartTwo;\n"],"names":["d3.select","d3.scaleLinear","d3.max","line","d3.line","area","d3.area"],"mappings":";;;;;;;AAgBA,MAAM,mBAA6C,CAAC;AAAA,EAClD;AAAA,EACA,QAAQ;AAAA;AAAA,EACR,SAAS;AAAA;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAAsB,IAAI;AACzC,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,YAAU,MAAM;AAEd,UAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,UAAI,aAAa,SAAS;AACxB,0BAAkB,aAAa,QAAQ,WAAW;AAAA,MACpD;AAAA,IACF,CAAC;AAED,QAAI,aAAa,SAAS;AACxB,qBAAe,QAAQ,aAAa,OAAO;AAC3C,wBAAkB,aAAa,QAAQ,WAAW;AAAA,IACpD;AAEA,WAAO,MAAM,eAAe,WAAA;AAAA,EAC9B,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,QAAI,mBAAmB,EAAG;AAE1B,UAAM,MAAMA,OAAU,OAAO,OAAO;AACpC,QAAI,UAAU,GAAG,EAAE,OAAA;AAEnB,UAAM,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,EAAa;AACtD,UAAM,aAAa,iBAAiB,OAAO,OAAO,OAAO;AACzD,UAAM,cAAc;AAEpB,UAAM,IAAIC,OACP,EACA,OAAO,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,EAC3B,MAAM,CAAC,GAAG,UAAU,CAAC;AAExB,UAAM,IAAIA,SAEP,OAAO,CAAC,GAAGC,IAAO,MAAM,CAAC,MAAiB,EAAE,KAAK,KAAK,CAAC,CAAC,EACxD,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,UAAMC,SAAOC,KACV,EACA,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,EAChB,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC;AAEtB,UAAMC,SAAOC,OAEV,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,CAAC,EAChB,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC;AAEvB,UAAM,QAAQ,IACX,OAAO,GAAG,EACV,KAAK,aAAa,aAAa,OAAO,IAAI,IAAI,OAAO,GAAG,GAAG;AAE9D,UACG,OAAO,MAAM,EACb,MAAM,IAAI,EACV,KAAK,SAAS,MAAM,EACpB,KAAK,KAAKH,MAAI,EACd,MAAM,QAAQ,MAAM,EACpB,MAAM,UAAU,SAAS,EACzB,MAAM,gBAAgB,CAAC;AAE1B,UACG,OAAO,MAAM,EACb,MAAM,IAAI,EACV,KAAK,SAAS,MAAM,EACpB,KAAK,KAAKE,MAAI,EACd,MAAM,QAAQ,aAAa;AAE9B,UAAM,UAAU,SAAS,EAAE,OAAA;AAC3B,UAAM,UAAU,YAAY,EAAE,OAAA;AAAA,EAChC,GAAG,CAAC,MAAM,QAAQ,WAAW,eAAe,cAAc,CAAC;AAE3D,6BACG,OAAA,EAAI,KAAK,cAAc,OAAO,EAAE,OAAc,OAAA,GAC7C,8BAAC,OAAA,EAAI,KAAK,QAAQ,OAAM,QAAO,QAAO,QAAQ,GAAG,MAAM,GACzD;AAEJ;"}

package/dist/components/charts/line-chart/area-lineChart/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/linear/index.js"),l=require("../../../../node_modules/d3-array/src/max/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-shape/src/line/index.js"),a=require("../../../../node_modules/d3-shape/src/area/index.js");exports.default=({data:d,width:i="100%",height:u=200,lineColor:c="#ADE7CB",lineFillColor:o="#EBF9F2",...f})=>{const h=t.useRef(null),m=t.useRef(null),[p,x]=t.useState(0);return t.useEffect(()=>{const e=new ResizeObserver(()=>{m.current&&x(m.current.clientWidth)});return m.current&&(e.observe(m.current),x(m.current.clientWidth)),()=>e.disconnect()},[]),t.useEffect(()=>{if(0===p)return;const e=s.default(h.current);e.selectAll("*").remove();const t=p-0-0,i=u,f=r.default().domain([0,d.length-1]).range([0,t]),m=r.default().domain([0,l.default(d,e=>e.value)||1]).range([i,0]),x=n.default().x((e,t)=>f(t)).y(e=>m(e.value)),v=a.default().x((e,t)=>f(t)).y0(i).y1(e=>m(e.value)),y=e.append("g").attr("transform","translate(0,5)");y.append("path").datum(d).attr("class","line").attr("d",x).style("fill","none").style("stroke",c).style("stroke-width",5),y.append("path").datum(d).attr("class","area").attr("d",v).style("fill",o),y.selectAll(".domain").remove(),y.selectAll(".tick line").remove()},[d,u,c,o,p]),/* @__PURE__ */e.jsx("div",{ref:m,style:{width:i,height:u},children:/* @__PURE__ */e.jsx("svg",{ref:h,width:"100%",height:"100%",...f})})};
+//# sourceMappingURL=index.js.map

package/dist/components/charts/line-chart/area-lineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/line-chart/area-lineChart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  width?: number | string; // Accept string for percentage width\n  height?: number | string;\n  lineColor?: string;\n  lineFillColor?: string;\n}\n\nconst AreaLineChartTwo: React.FC<LineChartProps> = ({\n  data,\n  width = \"100%\", // Default to responsive width\n  height = 200, // Set a default numeric height\n  lineColor = \"#ADE7CB\",\n  lineFillColor = \"#EBF9F2\",\n  ...rest\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null); // Reference to the container\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useEffect(() => {\n    // Set up ResizeObserver to track container width\n    const resizeObserver = new ResizeObserver(() => {\n      if (containerRef.current) {\n        setContainerWidth(containerRef.current.clientWidth);\n      }\n    });\n\n    if (containerRef.current) {\n      resizeObserver.observe(containerRef.current);\n      setContainerWidth(containerRef.current.clientWidth);\n    }\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (containerWidth === 0) return; // Skip rendering until we have a valid width\n\n    const svg = d3.select(svgRef.current);\n    svg.selectAll(\"*\").remove(); // Clear previous content\n\n    const margin = { top: 5, left: 0, right: 0, bottom: 5 };\n    const chartWidth = containerWidth - margin.left - margin.right; // Use container width\n    const chartHeight = height as number;\n\n    const x = d3\n      .scaleLinear()\n      .domain([0, data.length - 1])\n      .range([0, chartWidth]);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: DataPoint) => d.value) || 1]) // Fallback for empty data\n      .range([chartHeight, 0]);\n\n    const line = d3\n      .line<DataPoint>()\n      .x((_, i) => x(i))\n      .y((d) => y(d.value));\n\n    const area = d3\n      .area<DataPoint>()\n      .x((_, i) => x(i))\n      .y0(chartHeight)\n      .y1((d) => y(d.value));\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", lineColor)\n      .style(\"stroke-width\", 5);\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"area\")\n      .attr(\"d\", area)\n      .style(\"fill\", lineFillColor);\n\n    chart.selectAll(\".domain\").remove();\n    chart.selectAll(\".tick line\").remove();\n  }, [data, height, lineColor, lineFillColor, containerWidth]);\n\n  return (\n    <div ref={containerRef} style={{ width: width, height: height }}>\n      <svg ref={svgRef} width=\"100%\" height=\"100%\" {...rest}></svg>\n    </div>\n  );\n};\n\nexport default AreaLineChartTwo;\n"],"names":["data","width","height","lineColor","lineFillColor","rest","svgRef","useRef","containerRef","containerWidth","setContainerWidth","useState","useEffect","resizeObserver","ResizeObserver","current","clientWidth","observe","disconnect","svg","d3.select","selectAll","remove","chartWidth","chartHeight","x","d3.scaleLinear","domain","length","range","y","d3.max","d","value","line","d3.line","_","i","area","d3.area","y0","y1","chart","append","attr","datum","style","ref","children"],"mappings":"sdAgBmD,EACjDA,OACAC,QAAQ,OACRC,SAAS,IACTC,YAAY,UACZC,gBAAgB,aACbC,MAEH,MAAMC,EAASC,EAAAA,OAAsB,MAC/BC,EAAeD,EAAAA,OAAuB,OACrCE,EAAgBC,GAAqBC,EAAAA,SAAS,GAyErD,OAvEAC,EAAAA,UAAU,KAER,MAAMC,EAAiB,IAAIC,eAAe,KACpCN,EAAaO,SACfL,EAAkBF,EAAaO,QAAQC,eAS3C,OALIR,EAAaO,UACfF,EAAeI,QAAQT,EAAaO,SACpCL,EAAkBF,EAAaO,QAAQC,cAGlC,IAAMH,EAAeK,cAC3B,IAEHN,EAAAA,UAAU,KACR,GAAuB,IAAnBH,EAAsB,OAE1B,MAAMU,EAAMC,EAAAA,QAAUd,EAAOS,SAC7BI,EAAIE,UAAU,KAAKC,SAEnB,MACMC,EAAad,EADY,EAAU,EAEnCe,EAActB,EAEduB,EAAIC,EAAAA,UAEPC,OAAO,CAAC,EAAG3B,EAAK4B,OAAS,IACzBC,MAAM,CAAC,EAAGN,IAEPO,EAAIJ,EAAAA,UAEPC,OAAO,CAAC,EAAGI,EAAAA,QAAO/B,EAAOgC,GAAiBA,EAAEC,QAAU,IACtDJ,MAAM,CAACL,EAAa,IAEjBU,EAAOC,EAAAA,UAEVV,EAAE,CAACW,EAAGC,IAAMZ,EAAEY,IACdP,EAAGE,GAAMF,EAAEE,EAAEC,QAEVK,EAAOC,EAAAA,UAEVd,EAAE,CAACW,EAAGC,IAAMZ,EAAEY,IACdG,GAAGhB,GACHiB,GAAIT,GAAMF,EAAEE,EAAEC,QAEXS,EAAQvB,EACXwB,OAAO,KACPC,KAAK,YAAa,kBAErBF,EACGC,OAAO,QACPE,MAAM7C,GACN4C,KAAK,QAAS,QACdA,KAAK,IAAKV,GACVY,MAAM,OAAQ,QACdA,MAAM,SAAU3C,GAChB2C,MAAM,eAAgB,GAEzBJ,EACGC,OAAO,QACPE,MAAM7C,GACN4C,KAAK,QAAS,QACdA,KAAK,IAAKN,GACVQ,MAAM,OAAQ1C,GAEjBsC,EAAMrB,UAAU,WAAWC,SAC3BoB,EAAMrB,UAAU,cAAcC,UAC7B,CAACtB,EAAME,EAAQC,EAAWC,EAAeK,yBAGzC,MAAA,CAAIsC,IAAKvC,EAAcsC,MAAO,CAAE7C,QAAcC,UAC7C8C,8BAAC,MAAA,CAAID,IAAKzC,EAAQL,MAAM,OAAOC,OAAO,UAAWG"}

package/dist/components/charts/line-chart/line-chart/index.esm.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect } from "react";
+import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
+import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
+import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
+import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
+import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
+import { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
+const formatNumber = (num) => {
+  if (num >= 1e9) return (num / 1e9).toFixed(1) + "B";
+  if (num >= 1e6) return (num / 1e6).toFixed(1) + "M";
+  if (num >= 1e3) return (num / 1e3).toFixed(1) + "K";
+  return num;
+};
+const LineChart = ({
+  data,
+  numOfLines = 5,
+  width = 500,
+  height = 300
+}) => {
+  const svgRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const maxValue = useMemo(() => {
+    return Math.max(...data.map((d) => d.value));
+  }, [data]);
+  const yAxisMaxValue = useMemo(() => {
+    return maxValue * 1.25;
+  }, [maxValue]);
+  const yAxisTicks = useMemo(() => {
+    const ticks = [];
+    const interval = yAxisMaxValue / numOfLines;
+    for (let i = 0; i <= numOfLines; i++) {
+      ticks.push(interval * i);
+    }
+    return ticks;
+  }, [yAxisMaxValue, numOfLines]);
+  const needsHorizontalScroll = data.length > 12;
+  const minGroupWidth = 120;
+  const calculatedChartWidth = needsHorizontalScroll ? Math.max(data.length * minGroupWidth, width) : width;
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        const newWidth = entries[0].contentRect.width;
+        setContainerWidth(newWidth);
+      }
+    });
+    if (wrapper) {
+      resizeObserver.observe(wrapper);
+    }
+    return () => {
+      if (wrapper) {
+        resizeObserver.unobserve(wrapper);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const svg = select(svgRef.current);
+    svg.selectAll("*").remove();
+    const margin = { top: 20, right: 20, bottom: 70, left: 40 };
+    const barWidth = calculatedChartWidth - margin.left - margin.right;
+    const barHeight = height - margin.top - margin.bottom;
+    const mousemove = (event, d) => {
+      const xPosition = event.offsetX + margin.left - 25;
+      const yPosition = event.offsetY + margin.top - 40;
+      const text = `${d.label} - ${d.value}`;
+      tooltip.attr("x", xPosition).attr("y", yPosition).style("opacity", 9).style("height", text.length >= 16 ? 50 : 35);
+      tooltipText.html(text);
+    };
+    const mouseleave = () => {
+      tooltip.style("opacity", 0);
+    };
+    const x = band().domain(data.map((d) => d.label)).range([0, barWidth]).padding(0.1);
+    const y = linear().domain([0, max(data, (d) => d.value)]).range([barHeight, 0]);
+    const chart = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    const line$1 = line().x((d) => x(d.label) + x.bandwidth() / 2).y((d) => y(d.value));
+    chart.append("path").datum(data).attr("class", "line").attr("d", line$1).style("fill", "none").style("stroke", "#357AF6").style("stroke-width", 2);
+    chart.selectAll(".point").data(data).enter().append("circle").attr("class", "point").attr("cx", (d) => x(d.label) + x.bandwidth() / 2).attr("cy", (d) => y(d.value)).attr("r", 4).style("fill", "#357AF6").on("mousemove", mousemove).on("mouseleave", mouseleave);
+    yAxisTicks.slice(1).forEach((tick) => {
+      chart.append("line").attr("class", "dotted-line").attr("x1", 0).attr("y1", y(tick)).attr("x2", width).attr("y2", y(tick)).style("stroke", "gray").style("stroke-dasharray", "3,3");
+    });
+    const xAxis = chart.append("g").attr("class", "x-axis").attr("transform", `translate(0, ${barHeight})`).call(axisBottom(x));
+    xAxis.selectAll(".tick line").remove();
+    const yAxis = chart.append("g").attr("class", "y-axis").call(
+      axisLeft(y).tickValues(yAxisTicks).tickFormat((d) => {
+        return formatNumber(d);
+      }).tickSizeOuter(0),
+      0
+    );
+    yAxis.selectAll(".domain").remove();
+    yAxis.selectAll(".tick line").remove();
+    const tooltip = svg.append("foreignObject").attr("class", "tooltip").attr("width", 120).attr("height", 20).style("opacity", 0).style("position", "absolute").style("background-color", "white").style("border", "none").style("box-shadow", "0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius", "0.313rem").style("padding", "0.625rem").style("font-size", "0.75rem");
+    const tooltipText = tooltip.append("xhtml:div").style("font-size", "0.75rem").style("color", "black");
+  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref: svgRef,
+      width: calculatedChartWidth,
+      height,
+      viewBox: `0 0 ${calculatedChartWidth} ${height}`
+    }
+  ) });
+};
+export {
+  LineChart as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/charts/line-chart/line-chart/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/line-chart/line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst LineChart: React.FC<LineChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  const needsHorizontalScroll = data.length > 12;\n  const minGroupWidth = 120; \n  const calculatedChartWidth = needsHorizontalScroll \n      ? Math.max(data.length * minGroupWidth, width)\n      : width;\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n  useEffect(() => {\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = calculatedChartWidth - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: any, d: any) => {\n\n      const xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d: any) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: any) => d.value)])\n      .range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const line = d3\n      .line<DataPoint>()\n      //@ts-expect-error not applicable\n      .x((d: any) => x(d.label) + x.bandwidth() / 2)\n      .y((d: any) => y(d.value));\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", \"#357AF6\")\n      .style(\"stroke-width\", 2);\n\n    chart\n      .selectAll(\".point\")\n      .data(data)\n      .enter()\n      .append(\"circle\")\n      .attr(\"class\", \"point\")\n      //@ts-expect-error not applicable\n      .attr(\"cx\", (d: any) => x(d.label) + x.bandwidth() / 2)\n      .attr(\"cy\", (d: any) => y(d.value))\n      .attr(\"r\", 4)\n      .style(\"fill\", \"#357AF6\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    yAxisTicks.slice(1).forEach((tick) => {\n      chart\n        .append(\"line\")\n        .attr(\"class\", \"dotted-line\")\n        .attr(\"x1\", 0)\n        .attr(\"y1\", y(tick))\n        .attr(\"x2\", width)\n        .attr(\"y2\", y(tick))\n        .style(\"stroke\", \"gray\")\n        .style(\"stroke-dasharray\", \"3,3\");\n    });\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x));\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0),\n        0,\n      );\n\n    yAxis.selectAll(\".domain\").remove();\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);\n\n  return (\n    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n        <svg \n            ref={svgRef}\n            width={calculatedChartWidth}\n            height={height}\n            viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n        />\n    </div>\n  );\n};\n\nexport default LineChart;\n"],"names":["d3.select","d3.scaleBand","d3.scaleLinear","d3.max","line","d3.line","d3.axisBottom","d3.axisLeft"],"mappings":"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"}

package/dist/components/charts/line-chart/line-chart/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../node_modules/d3-scale/src/band/index.js"),s=require("../../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../../node_modules/d3-array/src/max/index.js"),l=require("../../../../node_modules/d3-selection/src/select/index.js"),n=require("../../../../node_modules/d3-shape/src/line/index.js"),o=require("../../../../node_modules/d3-axis/src/axis/index.js");exports.default=({data:i,numOfLines:d=5,width:c=500,height:u=300})=>{const m=t.useRef(null),h=t.useRef(null),p=t.useMemo(()=>Math.max(...i.map(e=>e.value)),[i]),y=t.useMemo(()=>1.25*p,[p]),x=t.useMemo(()=>{const e=[],t=y/d;for(let r=0;r<=d;r++)e.push(t*r);return e},[y,d]),f=i.length>12?Math.max(120*i.length,c):c;return t.useEffect(()=>{const e=h.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;setContainerWidth(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{const e=l.default(m.current);e.selectAll("*").remove();const t=f-40-20,d=u-20-70,h=r.default().domain(i.map(e=>e.label)).range([0,t]).padding(.1),p=s.default().domain([0,a.default(i,e=>e.value)]).range([d,0]),y=e.append("g").attr("transform","translate(40,20)"),v=n.default().x(e=>h(e.label)+h.bandwidth()/2).y(e=>p(e.value));y.append("path").datum(i).attr("class","line").attr("d",v).style("fill","none").style("stroke","#357AF6").style("stroke-width",2),y.selectAll(".point").data(i).enter().append("circle").attr("class","point").attr("cx",e=>h(e.label)+h.bandwidth()/2).attr("cy",e=>p(e.value)).attr("r",4).style("fill","#357AF6").on("mousemove",(e,t)=>{const r=e.offsetX+40-25,s=e.offsetY+20-40,a=`${t.label} - ${t.value}`;b.attr("x",r).attr("y",s).style("opacity",9).style("height",a.length>=16?50:35),w.html(a)}).on("mouseleave",()=>{b.style("opacity",0)}),x.slice(1).forEach(e=>{y.append("line").attr("class","dotted-line").attr("x1",0).attr("y1",p(e)).attr("x2",c).attr("y2",p(e)).style("stroke","gray").style("stroke-dasharray","3,3")}),y.append("g").attr("class","x-axis").attr("transform",`translate(0, ${d})`).call(o.axisBottom(h)).selectAll(".tick line").remove();const g=y.append("g").attr("class","y-axis").call(o.axisLeft(p).tickValues(x).tickFormat(e=>{return(t=e)>=1e9?(t/1e9).toFixed(1)+"B":t>=1e6?(t/1e6).toFixed(1)+"M":t>=1e3?(t/1e3).toFixed(1)+"K":t;var t}).tickSizeOuter(0),0);g.selectAll(".domain").remove(),g.selectAll(".tick line").remove();const b=e.append("foreignObject").attr("class","tooltip").attr("width",120).attr("height",20).style("opacity",0).style("position","absolute").style("background-color","white").style("border","none").style("box-shadow","0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)").style("border-radius","0.313rem").style("padding","0.625rem").style("font-size","0.75rem"),w=b.append("xhtml:div").style("font-size","0.75rem").style("color","black")},[i,u,c,y,x,f]),/* @__PURE__ */e.jsx("div",{ref:h,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("svg",{ref:m,width:f,height:u,viewBox:`0 0 ${f} ${u}`})})};
+//# sourceMappingURL=index.js.map

package/dist/components/charts/line-chart/line-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/line-chart/line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo } from \"react\";\nimport * as d3 from \"d3\";\n\ninterface DataPoint {\n  label: string;\n  value: number;\n}\n\ninterface LineChartProps {\n  data: DataPoint[];\n  numOfLines?: number;\n  width?: number;\n  height?: number;\n}\n\nconst formatNumber = (num: number) => {\n  if (num >= 1e9) return (num / 1e9).toFixed(1) + \"B\";\n  if (num >= 1e6) return (num / 1e6).toFixed(1) + \"M\";\n  if (num >= 1e3) return (num / 1e3).toFixed(1) + \"K\";\n  return num;\n};\n\nconst LineChart: React.FC<LineChartProps> = ({\n  data,\n  numOfLines = 5,\n  width = 500,\n  height = 300,\n}) => {\n  const svgRef = useRef<SVGSVGElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const maxValue = useMemo(() => {\n    return Math.max(...data.map((d) => d.value));\n  }, [data]);\n\n  const yAxisMaxValue = useMemo(() => {\n    return maxValue * 1.25;\n  }, [maxValue]);\n\n  const yAxisTicks = useMemo(() => {\n    const ticks = [];\n    const interval = yAxisMaxValue / numOfLines;\n    for (let i = 0; i <= numOfLines; i++) {\n      ticks.push(interval * i);\n    }\n    return ticks;\n  }, [yAxisMaxValue, numOfLines]);\n\n  const needsHorizontalScroll = data.length > 12;\n  const minGroupWidth = 120; \n  const calculatedChartWidth = needsHorizontalScroll \n      ? Math.max(data.length * minGroupWidth, width)\n      : width;\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n  useEffect(() => {\n    const svg = d3.select(svgRef.current);\n\n    svg.selectAll(\"*\").remove();\n\n    const margin = { top: 20, right: 20, bottom: 70, left: 40 };\n    const barWidth = calculatedChartWidth - margin.left - margin.right;\n    const barHeight = height - margin.top - margin.bottom;\n\n    const mousemove = (event: any, d: any) => {\n\n      const xPosition = event.offsetX + margin.left - 25;\n      const yPosition = event.offsetY + margin.top - 40;\n      const text = `${d.label} - ${d.value}`;\n      tooltip\n        .attr(\"x\", xPosition)\n        .attr(\"y\", yPosition)\n        .style(\"opacity\", 9)\n        .style(\"height\", text.length >= 16 ? 50 : 35);\n\n      tooltipText.html(text);\n    };\n\n    const mouseleave = () => {\n      tooltip.style(\"opacity\", 0);\n    };\n\n    const x = d3\n      .scaleBand()\n      .domain(data.map((d: any) => d.label))\n      .range([0, barWidth])\n      .padding(0.1);\n\n    const y = d3\n      .scaleLinear()\n      .domain([0, d3.max(data, (d: any) => d.value)])\n      .range([barHeight, 0]);\n\n    const chart = svg\n      .append(\"g\")\n      .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    const line = d3\n      .line<DataPoint>()\n      //@ts-expect-error not applicable\n      .x((d: any) => x(d.label) + x.bandwidth() / 2)\n      .y((d: any) => y(d.value));\n\n    chart\n      .append(\"path\")\n      .datum(data)\n      .attr(\"class\", \"line\")\n      .attr(\"d\", line)\n      .style(\"fill\", \"none\")\n      .style(\"stroke\", \"#357AF6\")\n      .style(\"stroke-width\", 2);\n\n    chart\n      .selectAll(\".point\")\n      .data(data)\n      .enter()\n      .append(\"circle\")\n      .attr(\"class\", \"point\")\n      //@ts-expect-error not applicable\n      .attr(\"cx\", (d: any) => x(d.label) + x.bandwidth() / 2)\n      .attr(\"cy\", (d: any) => y(d.value))\n      .attr(\"r\", 4)\n      .style(\"fill\", \"#357AF6\")\n      .on(\"mousemove\", mousemove)\n      .on(\"mouseleave\", mouseleave);\n\n    yAxisTicks.slice(1).forEach((tick) => {\n      chart\n        .append(\"line\")\n        .attr(\"class\", \"dotted-line\")\n        .attr(\"x1\", 0)\n        .attr(\"y1\", y(tick))\n        .attr(\"x2\", width)\n        .attr(\"y2\", y(tick))\n        .style(\"stroke\", \"gray\")\n        .style(\"stroke-dasharray\", \"3,3\");\n    });\n\n    const xAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"x-axis\")\n      .attr(\"transform\", `translate(0, ${barHeight})`)\n      .call(d3.axisBottom(x));\n\n    xAxis.selectAll(\".tick line\").remove();\n\n    const yAxis = chart\n      .append(\"g\")\n      .attr(\"class\", \"y-axis\")\n      .call(\n        d3\n          .axisLeft(y)\n          .tickValues(yAxisTicks)\n          //@ts-expect-error not applicable\n          .tickFormat((d: any) => {\n            return formatNumber(d);\n          })\n          .tickSizeOuter(0),\n        0,\n      );\n\n    yAxis.selectAll(\".domain\").remove();\n    yAxis.selectAll(\".tick line\").remove();\n\n    const tooltip = svg\n      .append(\"foreignObject\")\n      .attr(\"class\", \"tooltip\")\n      .attr(\"width\", 120)\n      .attr(\"height\", 20)\n      .style(\"opacity\", 0)\n      .style(\"position\", \"absolute\")\n      .style(\"background-color\", \"white\")\n      .style(\"border\", \"none\")\n      .style(\"box-shadow\", \"0rem 0rem 0.469rem 0rem rgba(0, 0, 0, 0.15)\")\n      .style(\"border-radius\", \"0.313rem\")\n      .style(\"padding\", \"0.625rem\")\n      .style(\"font-size\", \"0.75rem\");\n\n    const tooltipText = tooltip\n      .append(\"xhtml:div\")\n      .style(\"font-size\", \"0.75rem\")\n      .style(\"color\", \"black\");\n  }, [data, height, width, yAxisMaxValue, yAxisTicks, calculatedChartWidth]);\n\n  return (\n    <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n        <svg \n            ref={svgRef}\n            width={calculatedChartWidth}\n            height={height}\n            viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n        />\n    </div>\n  );\n};\n\nexport default LineChart;\n"],"names":["data","numOfLines","width","height","svgRef","useRef","wrapperRef","maxValue","useMemo","Math","max","map","d","value","yAxisMaxValue","yAxisTicks","ticks","interval","i","push","calculatedChartWidth","length","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","setContainerWidth","observe","unobserve","svg","d3.select","selectAll","remove","barWidth","barHeight","x","d3.scaleBand","domain","label","range","padding","y","d3.scaleLinear","d3.max","chart","append","attr","line","d3.line","bandwidth","datum","style","enter","on","event","xPosition","offsetX","yPosition","offsetY","text","tooltip","tooltipText","html","slice","forEach","tick","call","d3.axisBottom","yAxis","d3.axisLeft","tickValues","tickFormat","num","toFixed","tickSizeOuter","jsx","ref","children","viewBox"],"mappings":"shBAsB4C,EAC1CA,OACAC,aAAa,EACbC,QAAQ,IACRC,SAAS,QAET,MAAMC,EAASC,EAAAA,OAAsB,MAC/BC,EAAaD,EAAAA,OAAuB,MACpCE,EAAWC,EAAAA,QAAQ,IAChBC,KAAKC,OAAOV,EAAKW,IAAKC,GAAMA,EAAEC,QACpC,CAACb,IAEEc,EAAgBN,EAAAA,QAAQ,IACV,KAAXD,EACN,CAACA,IAEEQ,EAAaP,EAAAA,QAAQ,KACzB,MAAMQ,EAAQ,GACRC,EAAWH,EAAgBb,EACjC,IAAA,IAASiB,EAAI,EAAGA,GAAKjB,EAAYiB,IAC/BF,EAAMG,KAAKF,EAAWC,GAExB,OAAOF,GACN,CAACF,EAAeb,IAIbmB,EAFwBpB,EAAKqB,OAAS,GAGtCZ,KAAKC,IAFW,IAEPV,EAAKqB,OAAwBnB,GACtCA,EAsJN,OArJEoB,EAAAA,UAAU,KACN,MAAMC,EAAUjB,EAAWkB,QAErBC,EAAiB,IAAIC,eAAgBC,IACvC,GAAIA,EAAQ,GAAI,CACZ,MAAMC,EAAWD,EAAQ,GAAGE,YAAY3B,MACxC4B,kBAAkBF,EACtB,IAOJ,OAJIL,GACAE,EAAeM,QAAQR,GAGpB,KACCA,GACAE,EAAeO,UAAUT,KAGlC,IACLD,EAAAA,UAAU,KACR,MAAMW,EAAMC,EAAAA,QAAU9B,EAAOoB,SAE7BS,EAAIE,UAAU,KAAKC,SAEnB,MACMC,EAAWjB,EADsC,GAAtB,GAE3BkB,EAAYnC,EAFI,GAAuB,GAsBvCoC,EAAIC,EAAAA,UAEPC,OAAOzC,EAAKW,IAAKC,GAAWA,EAAE8B,QAC9BC,MAAM,CAAC,EAAGN,IACVO,QAAQ,IAELC,EAAIC,EAAAA,UAEPL,OAAO,CAAC,EAAGM,EAAAA,QAAO/C,EAAOY,GAAWA,EAAEC,SACtC8B,MAAM,CAACL,EAAW,IAEfU,EAAQf,EACXgB,OAAO,KACPC,KAAK,YAAa,oBAEfC,EAAOC,EAAAA,UAGVb,EAAG3B,GAAW2B,EAAE3B,EAAE8B,OAASH,EAAEc,YAAc,GAC3CR,EAAGjC,GAAWiC,EAAEjC,EAAEC,QAErBmC,EACGC,OAAO,QACPK,MAAMtD,GACNkD,KAAK,QAAS,QACdA,KAAK,IAAKC,GACVI,MAAM,OAAQ,QACdA,MAAM,SAAU,WAChBA,MAAM,eAAgB,GAEzBP,EACGb,UAAU,UACVnC,KAAKA,GACLwD,QACAP,OAAO,UACPC,KAAK,QAAS,SAEdA,KAAK,KAAOtC,GAAW2B,EAAE3B,EAAE8B,OAASH,EAAEc,YAAc,GACpDH,KAAK,KAAOtC,GAAWiC,EAAEjC,EAAEC,QAC3BqC,KAAK,IAAK,GACVK,MAAM,OAAQ,WACdE,GAAG,YA3DY,CAACC,EAAY9C,KAE7B,MAAM+C,EAAYD,EAAME,QAN6B,GAML,GAC1CC,EAAYH,EAAMI,QAPJ,GAO2B,GACzCC,EAAO,GAAGnD,EAAE8B,WAAW9B,EAAEC,QAC/BmD,EACGd,KAAK,IAAKS,GACVT,KAAK,IAAKW,GACVN,MAAM,UAAW,GACjBA,MAAM,SAAUQ,EAAK1C,QAAU,GAAK,GAAK,IAE5C4C,EAAYC,KAAKH,KAiDhBN,GAAG,aA9Ca,KACjBO,EAAQT,MAAM,UAAW,KA+C3BxC,EAAWoD,MAAM,GAAGC,QAASC,IAC3BrB,EACGC,OAAO,QACPC,KAAK,QAAS,eACdA,KAAK,KAAM,GACXA,KAAK,KAAML,EAAEwB,IACbnB,KAAK,KAAMhD,GACXgD,KAAK,KAAML,EAAEwB,IACbd,MAAM,SAAU,QAChBA,MAAM,mBAAoB,SAGjBP,EACXC,OAAO,KACPC,KAAK,QAAS,UACdA,KAAK,YAAa,gBAAgBZ,MAClCgC,KAAKC,EAAAA,WAAchC,IAEhBJ,UAAU,cAAcC,SAE9B,MAAMoC,EAAQxB,EACXC,OAAO,KACPC,KAAK,QAAS,UACdoB,KACCG,EAAAA,SACY5B,GACT6B,WAAW3D,GAEX4D,WAAY/D,IACX,OA7JUgE,EA6JUhE,IA5JnB,KAAagE,EAAM,KAAKC,QAAQ,GAAK,IAC5CD,GAAO,KAAaA,EAAM,KAAKC,QAAQ,GAAK,IAC5CD,GAAO,KAAaA,EAAM,KAAKC,QAAQ,GAAK,IACzCD,EAJY,IAACA,IA+JXE,cAAc,GACjB,GAGJN,EAAMrC,UAAU,WAAWC,SAC3BoC,EAAMrC,UAAU,cAAcC,SAE9B,MAAM4B,EAAU/B,EACbgB,OAAO,iBACPC,KAAK,QAAS,WACdA,KAAK,QAAS,KACdA,KAAK,SAAU,IACfK,MAAM,UAAW,GACjBA,MAAM,WAAY,YAClBA,MAAM,mBAAoB,SAC1BA,MAAM,SAAU,QAChBA,MAAM,aAAc,+CACpBA,MAAM,gBAAiB,YACvBA,MAAM,UAAW,YACjBA,MAAM,YAAa,WAEhBU,EAAcD,EACjBf,OAAO,aACPM,MAAM,YAAa,WACnBA,MAAM,QAAS,UACjB,CAACvD,EAAMG,EAAQD,EAAOY,EAAeC,EAAYK,mBAGlD2D,EAAAA,IAAC,MAAA,CAAIC,IAAK1E,EAAYiD,MAAO,CAAErD,MAAO,OAAQC,OAAQ,QAClD8E,wBAAAF,EAAAA,IAAC,MAAA,CACGC,IAAK5E,EACLF,MAAOkB,EACPjB,SACA+E,QAAS,OAAO9D,KAAwBjB"}

package/dist/components/confirm-modal/confirm-modal/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/confirm-modal/confirm-modal.tsx"],"sourcesContent":["import {\n\tBox,\n\tCircularProgress,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tDivider,\n\tIconButton\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Typography from '../typography/typography';\nimport Button from '../button/button';\nimport './confirm-modal.scss';\nimport images from '../../assets/images';\nimport { useLanguage } from '../../hooks/useLangauge';\nimport { useTranslation } from 'react-i18next';\n\ninterface ConfirmPopUpProps extends DialogProps {\n\ttitle: string;\n\tdescription: string | JSX.Element;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tbuttonTexts?: {\n\t\tconfirm: string;\n\t\tcancel: string;\n\t};\n\tbuttonColors?: {\n\t\tconfirm: string;\n\t\tcancel?: string;\n\t};\n\tmodalType?: 'alert' | 'info';\n\tloading?: boolean;\n\tshowAction?: boolean;\n}\n\nconst ConfirmPopUp = (props: ConfirmPopUpProps) => {\n\tconst { t } = useTranslation();\n\tconst {\n\t\topen,\n\t\ttitle,\n\t\tdescription,\n\t\tonClose,\n\t\tonConfirm,\n\t\tmodalType = 'alert',\n\t\tbuttonTexts = { confirm: t('common.delete'), cancel: t('common.cancel') },\n\t\tbuttonColors = { confirm: 'error' },\n\t\tloading = false,\n\t\tshowAction=true,\n\t\t...rest\n\t} = props;\n\n\tconst icon = modalType === 'info' ? images.info : images.alert;\n    const {isRtl}=useLanguage();\n\treturn (\n\t\t<>\n\t\t\t<Dialog open={open} onClose={onClose} className='confirm' {...rest}>\n\t\t\t\t<DialogTitle className='confirm--head'>\n\t\t\t\t\t<Box className='confirm--title'>\n\t\t\t\t\t\t<img src={icon} alt='alert icon' />{' '}\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\ttype='s3'\n\t\t\t\t\t\t\tml={1}\n\t\t\t\t\t\t\tweight='medium'\n\t\t\t\t\t\t\tcolor='theme.secondary.1000'>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t\t<IconButton disableRipple onClick={onClose} disabled={loading}>\n\t\t\t\t\t\t<CloseIcon />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</DialogTitle>\n\t\t\t\t<Divider />\n\t\t\t\t<DialogContent className='confirm--content'>\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.1000'>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Typography>\n\t\t\t\t</DialogContent>\n\t\t\t\t<Divider />\n\t\t\t\t{showAction &&<DialogActions\n\t\t\t\t\tclassName='confirm--actions'\n\t\t\t\t\tsx={{ backgroundColor: 'theme.secondary.200' }}>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant='text'\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\tcolor={buttonColors?.cancel}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.cancel}\n\t\t\t\t\t</Button>\n\t\t\t\t{buttonTexts.confirm &&<Button\n\t\t\t\t\t\tcolor={buttonColors.confirm}\n\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\tsx={isRtl?{mr: 1}:{}}\n\t\t\t\t\t\tendIcon={loading && <CircularProgress size={18} color='inherit' />}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.confirm}\n\t\t\t\t\t</Button>}\n\t\t\t\t</DialogActions>}\n\t\t\t</Dialog>\n\t\t</>\n\t);\n};\n\nexport { ConfirmPopUp };\nexport default ConfirmPopUp;\n"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;;;;;;AAqCA,MAAM,eAAe,CAAC,UAA6B;AAClD,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,eAAe,GAAG,QAAQ,EAAE,eAAe,EAAA;AAAA,IACtE,eAAe,EAAE,SAAS,QAAA;AAAA,IAC1B,UAAU;AAAA,IACV,aAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACA;AAEJ,QAAM,OAAO,cAAc,SAAS,OAAO,OAAO,OAAO;AACtD,QAAM,EAAC,MAAA,IAAO,YAAA;AACjB,SACC,oBAAA,UAAA,EACC,+BAAC,QAAA,EAAO,MAAY,SAAkB,WAAU,WAAW,GAAG,MAC7D,UAAA;AAAA,IAAA,qBAAC,aAAA,EAAY,WAAU,iBACtB,UAAA;AAAA,MAAA,qBAAC,KAAA,EAAI,WAAU,kBACd,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,KAAK,MAAM,KAAI,cAAa;AAAA,QAAG;AAAA,QACpC;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,IAAI;AAAA,YACJ,QAAO;AAAA,YACP,OAAM;AAAA,YACL,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACD;AAAA,MACA,oBAAC,YAAA,EAAW,eAAa,MAAC,SAAS,SAAS,UAAU,SACrD,UAAA,oBAACA,WAAA,CAAA,CAAU,EAAA,CACZ;AAAA,IAAA,GACD;AAAA,wBACC,SAAA,EAAQ;AAAA,IACT,oBAAC,eAAA,EAAc,WAAU,oBACxB,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,wBAC1B,UAAA,YAAA,CACF,GACD;AAAA,wBACC,SAAA,EAAQ;AAAA,IACR,cAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACd,WAAU;AAAA,QACV,IAAI,EAAE,iBAAiB,sBAAA;AAAA,QACvB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,OAAO,6CAAc;AAAA,cACrB,UAAU;AAAA,cACT,UAAA,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,YAAY,WAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACtB,OAAO,aAAa;AAAA,cACpB,SAAS;AAAA,cACT,IAAI,QAAM,EAAC,IAAI,EAAA,IAAG,CAAA;AAAA,cAClB,SAAS,WAAW,oBAAC,oBAAiB,MAAM,IAAI,OAAM,WAAU;AAAA,cAChE,UAAU;AAAA,cACT,UAAA,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,EAAA,CACD,EAAA,CACD;AAEF;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/confirm-modal/confirm-modal.tsx"],"sourcesContent":["import {\n\tBox,\n\tCircularProgress,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tDivider,\n\tIconButton\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Typography from '../typography/typography';\nimport Button from '../button/button';\nimport './confirm-modal.scss';\nimport images from '../../assets/images';\nimport { useLanguage } from '../../hooks/useLangauge';\nimport { useTranslation } from 'react-i18next';\n\ninterface ConfirmPopUpProps extends DialogProps {\n\ttitle: string;\n\tdescription: string | JSX.Element;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tbuttonTexts?: {\n\t\tconfirm: string;\n\t\tcancel: string;\n\t};\n\tbuttonColors?: {\n\t\tconfirm: string;\n\t\tcancel?: string;\n\t};\n\tmodalType?: 'alert' | 'info';\n\tloading?: boolean;\n\tshowAction?: boolean;\n}\n\nexport const ConfirmPopUp = (props: ConfirmPopUpProps) => {\n\tconst { t } = useTranslation();\n\tconst {\n\t\topen,\n\t\ttitle,\n\t\tdescription,\n\t\tonClose,\n\t\tonConfirm,\n\t\tmodalType = 'alert',\n\t\tbuttonTexts = { confirm: t('common.delete'), cancel: t('common.cancel') },\n\t\tbuttonColors = { confirm: 'error' },\n\t\tloading = false,\n\t\tshowAction=true,\n\t\t...rest\n\t} = props;\n\n\tconst icon = modalType === 'info' ? images.info : images.alert;\n    const {isRtl}=useLanguage();\n\treturn (\n\t\t<>\n\t\t\t<Dialog open={open} onClose={onClose} className='confirm' {...rest}>\n\t\t\t\t<DialogTitle className='confirm--head'>\n\t\t\t\t\t<Box className='confirm--title'>\n\t\t\t\t\t\t<img src={icon} alt='alert icon' />{' '}\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\ttype='s3'\n\t\t\t\t\t\t\tml={1}\n\t\t\t\t\t\t\tweight='medium'\n\t\t\t\t\t\t\tcolor='theme.secondary.1000'>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t\t<IconButton disableRipple onClick={onClose} disabled={loading}>\n\t\t\t\t\t\t<CloseIcon />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</DialogTitle>\n\t\t\t\t<Divider />\n\t\t\t\t<DialogContent className='confirm--content'>\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.1000'>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Typography>\n\t\t\t\t</DialogContent>\n\t\t\t\t<Divider />\n\t\t\t\t{showAction &&<DialogActions\n\t\t\t\t\tclassName='confirm--actions'\n\t\t\t\t\tsx={{ backgroundColor: 'theme.secondary.200' }}>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant='text'\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\tcolor={buttonColors?.cancel}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.cancel}\n\t\t\t\t\t</Button>\n\t\t\t\t{buttonTexts.confirm &&<Button\n\t\t\t\t\t\tcolor={buttonColors.confirm}\n\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\tsx={isRtl?{mr: 1}:{}}\n\t\t\t\t\t\tendIcon={loading && <CircularProgress size={18} color='inherit' />}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.confirm}\n\t\t\t\t\t</Button>}\n\t\t\t\t</DialogActions>}\n\t\t\t</Dialog>\n\t\t</>\n\t);\n};\n\nexport default ConfirmPopUp;\n"],"names":["CloseIcon"],"mappings":";;;;;;;;;;;;;;;;AAqCO,MAAM,eAAe,CAAC,UAA6B;AACzD,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,eAAe,GAAG,QAAQ,EAAE,eAAe,EAAA;AAAA,IACtE,eAAe,EAAE,SAAS,QAAA;AAAA,IAC1B,UAAU;AAAA,IACV,aAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACA;AAEJ,QAAM,OAAO,cAAc,SAAS,OAAO,OAAO,OAAO;AACtD,QAAM,EAAC,MAAA,IAAO,YAAA;AACjB,SACC,oBAAA,UAAA,EACC,+BAAC,QAAA,EAAO,MAAY,SAAkB,WAAU,WAAW,GAAG,MAC7D,UAAA;AAAA,IAAA,qBAAC,aAAA,EAAY,WAAU,iBACtB,UAAA;AAAA,MAAA,qBAAC,KAAA,EAAI,WAAU,kBACd,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,KAAK,MAAM,KAAI,cAAa;AAAA,QAAG;AAAA,QACpC;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,MAAK;AAAA,YACL,IAAI;AAAA,YACJ,QAAO;AAAA,YACP,OAAM;AAAA,YACL,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACD;AAAA,MACA,oBAAC,YAAA,EAAW,eAAa,MAAC,SAAS,SAAS,UAAU,SACrD,UAAA,oBAACA,WAAA,CAAA,CAAU,EAAA,CACZ;AAAA,IAAA,GACD;AAAA,wBACC,SAAA,EAAQ;AAAA,IACT,oBAAC,eAAA,EAAc,WAAU,oBACxB,UAAA,oBAAC,YAAA,EAAW,MAAK,MAAK,OAAM,wBAC1B,UAAA,YAAA,CACF,GACD;AAAA,wBACC,SAAA,EAAQ;AAAA,IACR,cAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACd,WAAU;AAAA,QACV,IAAI,EAAE,iBAAiB,sBAAA;AAAA,QACvB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,OAAO,6CAAc;AAAA,cACrB,UAAU;AAAA,cACT,UAAA,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,YAAY,WAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACtB,OAAO,aAAa;AAAA,cACpB,SAAS;AAAA,cACT,IAAI,QAAM,EAAC,IAAI,EAAA,IAAG,CAAA;AAAA,cAClB,SAAS,WAAW,oBAAC,oBAAiB,MAAM,IAAI,OAAM,WAAU;AAAA,cAChE,UAAU;AAAA,cACT,UAAA,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,EAAA,CACD,EAAA,CACD;AAEF;"}

package/dist/components/confirm-modal/confirm-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/confirm-modal/confirm-modal.tsx"],"sourcesContent":["import {\n\tBox,\n\tCircularProgress,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tDivider,\n\tIconButton\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Typography from '../typography/typography';\nimport Button from '../button/button';\nimport './confirm-modal.scss';\nimport images from '../../assets/images';\nimport { useLanguage } from '../../hooks/useLangauge';\nimport { useTranslation } from 'react-i18next';\n\ninterface ConfirmPopUpProps extends DialogProps {\n\ttitle: string;\n\tdescription: string | JSX.Element;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tbuttonTexts?: {\n\t\tconfirm: string;\n\t\tcancel: string;\n\t};\n\tbuttonColors?: {\n\t\tconfirm: string;\n\t\tcancel?: string;\n\t};\n\tmodalType?: 'alert' | 'info';\n\tloading?: boolean;\n\tshowAction?: boolean;\n}\n\nconst ConfirmPopUp = (props: ConfirmPopUpProps) => {\n\tconst { t } = useTranslation();\n\tconst {\n\t\topen,\n\t\ttitle,\n\t\tdescription,\n\t\tonClose,\n\t\tonConfirm,\n\t\tmodalType = 'alert',\n\t\tbuttonTexts = { confirm: t('common.delete'), cancel: t('common.cancel') },\n\t\tbuttonColors = { confirm: 'error' },\n\t\tloading = false,\n\t\tshowAction=true,\n\t\t...rest\n\t} = props;\n\n\tconst icon = modalType === 'info' ? images.info : images.alert;\n    const {isRtl}=useLanguage();\n\treturn (\n\t\t<>\n\t\t\t<Dialog open={open} onClose={onClose} className='confirm' {...rest}>\n\t\t\t\t<DialogTitle className='confirm--head'>\n\t\t\t\t\t<Box className='confirm--title'>\n\t\t\t\t\t\t<img src={icon} alt='alert icon' />{' '}\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\ttype='s3'\n\t\t\t\t\t\t\tml={1}\n\t\t\t\t\t\t\tweight='medium'\n\t\t\t\t\t\t\tcolor='theme.secondary.1000'>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t\t<IconButton disableRipple onClick={onClose} disabled={loading}>\n\t\t\t\t\t\t<CloseIcon />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</DialogTitle>\n\t\t\t\t<Divider />\n\t\t\t\t<DialogContent className='confirm--content'>\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.1000'>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Typography>\n\t\t\t\t</DialogContent>\n\t\t\t\t<Divider />\n\t\t\t\t{showAction &&<DialogActions\n\t\t\t\t\tclassName='confirm--actions'\n\t\t\t\t\tsx={{ backgroundColor: 'theme.secondary.200' }}>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant='text'\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\tcolor={buttonColors?.cancel}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.cancel}\n\t\t\t\t\t</Button>\n\t\t\t\t{buttonTexts.confirm &&<Button\n\t\t\t\t\t\tcolor={buttonColors.confirm}\n\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\tsx={isRtl?{mr: 1}:{}}\n\t\t\t\t\t\tendIcon={loading && <CircularProgress size={18} color='inherit' />}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.confirm}\n\t\t\t\t\t</Button>}\n\t\t\t\t</DialogActions>}\n\t\t\t</Dialog>\n\t\t</>\n\t);\n};\n\nexport { ConfirmPopUp };\nexport default ConfirmPopUp;\n"],"names":["ConfirmPopUp","props","t","useTranslation","open","title","description","onClose","onConfirm","modalType","buttonTexts","confirm","cancel","buttonColors","loading","showAction","rest","icon","images","info","alert","isRtl","useLanguage","jsx","Fragment","children","Dialog","className","jsxs","DialogTitle","Box","src","alt","Typography","type","ml","weight","color","IconButton","disableRipple","onClick","disabled","CloseIcon","Divider","DialogContent","DialogActions","sx","backgroundColor","Button","variant","mr","endIcon","CircularProgress","size"],"mappings":"uiCAqCA,MAAMA,EAAgBC,IACrB,MAAMC,EAAEA,GAAMC,oBACRC,KACLA,EAAAC,MACAA,EAAAC,YACAA,EAAAC,QACAA,EAAAC,UACAA,EAAAC,UACAA,EAAY,QAAAC,YACZA,EAAc,CAAEC,QAAST,EAAE,iBAAkBU,OAAQV,EAAE,kBAAeW,aACtEA,EAAe,CAAEF,QAAS,SAAAG,QAC1BA,GAAU,EAAAC,WACVA,GAAW,KACRC,GACAf,EAEEgB,EAAqB,SAAdR,EAAuBS,EAAAA,OAAOC,KAAOD,EAAAA,OAAOE,OAChDC,MAACA,GAAOC;AACjB,SACCC,IAAAC,EAAAA,SAAA,CACCC,+BAACC,EAAAA,QAAA,CAAOtB,OAAYG,UAAkBoB,UAAU,aAAcX,EAC7DS,SAAA;iBAAAG,KAACC,EAAAA,QAAA,CAAYF,UAAU,gBACtBF,SAAA;iBAAAG,KAACE,EAAAA,QAAA,CAAIH,UAAU,iBACdF,SAAA;eAAAF,EAAAA,IAAC,MAAA,CAAIQ,IAAKd,EAAMe,IAAI,eAAgB;eACpCT,EAAAA,IAACU,EAAAA,WAAA,CACAC,KAAK,KACLC,GAAI,EACJC,OAAO,SACPC,MAAM,uBACLZ,SAAApB;iBAGHkB,IAACe,EAAAA,QAAA,CAAWC,eAAa,EAACC,QAASjC,EAASkC,SAAU3B,EACrDW,0BAAAF,IAACmB,EAAAA,QAAA,CAAA;qBAGFC,EAAAA,QAAA;eACDpB,EAAAA,IAACqB,EAAAA,QAAA,CAAcjB,UAAU,mBACxBF,wBAAAF,EAAAA,IAACU,EAAAA,WAAA,CAAWC,KAAK,KAAKG,MAAM,uBAC1BZ,SAAAnB;qBAGFqC,EAAAA,QAAA,IACA5B,kBAAaa,EAAAA,KAACiB,EAAAA,QAAA,CACdlB,UAAU,mBACVmB,GAAI,CAAEC,gBAAiB,uBACvBtB,SAAA;eAAAF,EAAAA,IAACyB,EAAAA,OAAA,CACAC,QAAQ,OACRT,QAASjC,EACT8B,MAAO,MAAAxB,OAAA,EAAAA,EAAcD,OACrB6B,SAAU3B,EACTW,SAAAf,EAAYE,SAEdF,EAAYC,wBAAUY,EAAAA,IAACyB,EAAAA,OAAA,CACtBX,MAAOxB,EAAaF,QACpB6B,QAAShC,EACTsC,GAAIzB,EAAM,CAAC6B,GAAI,GAAG,CAAA,EAClBC,QAASrC,kBAAWS,EAAAA,IAAC6B,EAAAA,SAAiBC,KAAM,GAAIhB,MAAM,YACtDI,SAAU3B,EACTW,SAAAf,EAAYC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/confirm-modal/confirm-modal.tsx"],"sourcesContent":["import {\n\tBox,\n\tCircularProgress,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tDivider,\n\tIconButton\n} from '@mui/material';\nimport CloseIcon from '@mui/icons-material/Close';\nimport Typography from '../typography/typography';\nimport Button from '../button/button';\nimport './confirm-modal.scss';\nimport images from '../../assets/images';\nimport { useLanguage } from '../../hooks/useLangauge';\nimport { useTranslation } from 'react-i18next';\n\ninterface ConfirmPopUpProps extends DialogProps {\n\ttitle: string;\n\tdescription: string | JSX.Element;\n\tonClose: () => void;\n\tonConfirm: () => void;\n\tbuttonTexts?: {\n\t\tconfirm: string;\n\t\tcancel: string;\n\t};\n\tbuttonColors?: {\n\t\tconfirm: string;\n\t\tcancel?: string;\n\t};\n\tmodalType?: 'alert' | 'info';\n\tloading?: boolean;\n\tshowAction?: boolean;\n}\n\nexport const ConfirmPopUp = (props: ConfirmPopUpProps) => {\n\tconst { t } = useTranslation();\n\tconst {\n\t\topen,\n\t\ttitle,\n\t\tdescription,\n\t\tonClose,\n\t\tonConfirm,\n\t\tmodalType = 'alert',\n\t\tbuttonTexts = { confirm: t('common.delete'), cancel: t('common.cancel') },\n\t\tbuttonColors = { confirm: 'error' },\n\t\tloading = false,\n\t\tshowAction=true,\n\t\t...rest\n\t} = props;\n\n\tconst icon = modalType === 'info' ? images.info : images.alert;\n    const {isRtl}=useLanguage();\n\treturn (\n\t\t<>\n\t\t\t<Dialog open={open} onClose={onClose} className='confirm' {...rest}>\n\t\t\t\t<DialogTitle className='confirm--head'>\n\t\t\t\t\t<Box className='confirm--title'>\n\t\t\t\t\t\t<img src={icon} alt='alert icon' />{' '}\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\ttype='s3'\n\t\t\t\t\t\t\tml={1}\n\t\t\t\t\t\t\tweight='medium'\n\t\t\t\t\t\t\tcolor='theme.secondary.1000'>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t\t<IconButton disableRipple onClick={onClose} disabled={loading}>\n\t\t\t\t\t\t<CloseIcon />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</DialogTitle>\n\t\t\t\t<Divider />\n\t\t\t\t<DialogContent className='confirm--content'>\n\t\t\t\t\t<Typography type='s3' color='theme.secondary.1000'>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</Typography>\n\t\t\t\t</DialogContent>\n\t\t\t\t<Divider />\n\t\t\t\t{showAction &&<DialogActions\n\t\t\t\t\tclassName='confirm--actions'\n\t\t\t\t\tsx={{ backgroundColor: 'theme.secondary.200' }}>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant='text'\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t\tcolor={buttonColors?.cancel}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.cancel}\n\t\t\t\t\t</Button>\n\t\t\t\t{buttonTexts.confirm &&<Button\n\t\t\t\t\t\tcolor={buttonColors.confirm}\n\t\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t\t\tsx={isRtl?{mr: 1}:{}}\n\t\t\t\t\t\tendIcon={loading && <CircularProgress size={18} color='inherit' />}\n\t\t\t\t\t\tdisabled={loading}>\n\t\t\t\t\t\t{buttonTexts.confirm}\n\t\t\t\t\t</Button>}\n\t\t\t\t</DialogActions>}\n\t\t\t</Dialog>\n\t\t</>\n\t);\n};\n\nexport default ConfirmPopUp;\n"],"names":["ConfirmPopUp","props","t","useTranslation","open","title","description","onClose","onConfirm","modalType","buttonTexts","confirm","cancel","buttonColors","loading","showAction","rest","icon","images","info","alert","isRtl","useLanguage","jsx","Fragment","children","Dialog","className","jsxs","DialogTitle","Box","src","alt","Typography","type","ml","weight","color","IconButton","disableRipple","onClick","disabled","CloseIcon","Divider","DialogContent","DialogActions","sx","backgroundColor","Button","variant","mr","endIcon","CircularProgress","size"],"mappings":"uiCAqCO,MAAMA,EAAgBC,IAC5B,MAAMC,EAAEA,GAAMC,oBACRC,KACLA,EAAAC,MACAA,EAAAC,YACAA,EAAAC,QACAA,EAAAC,UACAA,EAAAC,UACAA,EAAY,QAAAC,YACZA,EAAc,CAAEC,QAAST,EAAE,iBAAkBU,OAAQV,EAAE,kBAAeW,aACtEA,EAAe,CAAEF,QAAS,SAAAG,QAC1BA,GAAU,EAAAC,WACVA,GAAW,KACRC,GACAf,EAEEgB,EAAqB,SAAdR,EAAuBS,EAAAA,OAAOC,KAAOD,EAAAA,OAAOE,OAChDC,MAACA,GAAOC;AACjB,SACCC,IAAAC,EAAAA,SAAA,CACCC,+BAACC,EAAAA,QAAA,CAAOtB,OAAYG,UAAkBoB,UAAU,aAAcX,EAC7DS,SAAA;iBAAAG,KAACC,EAAAA,QAAA,CAAYF,UAAU,gBACtBF,SAAA;iBAAAG,KAACE,EAAAA,QAAA,CAAIH,UAAU,iBACdF,SAAA;eAAAF,EAAAA,IAAC,MAAA,CAAIQ,IAAKd,EAAMe,IAAI,eAAgB;eACpCT,EAAAA,IAACU,EAAAA,WAAA,CACAC,KAAK,KACLC,GAAI,EACJC,OAAO,SACPC,MAAM,uBACLZ,SAAApB;iBAGHkB,IAACe,EAAAA,QAAA,CAAWC,eAAa,EAACC,QAASjC,EAASkC,SAAU3B,EACrDW,0BAAAF,IAACmB,EAAAA,QAAA,CAAA;qBAGFC,EAAAA,QAAA;eACDpB,EAAAA,IAACqB,EAAAA,QAAA,CAAcjB,UAAU,mBACxBF,wBAAAF,EAAAA,IAACU,EAAAA,WAAA,CAAWC,KAAK,KAAKG,MAAM,uBAC1BZ,SAAAnB;qBAGFqC,EAAAA,QAAA,IACA5B,kBAAaa,EAAAA,KAACiB,EAAAA,QAAA,CACdlB,UAAU,mBACVmB,GAAI,CAAEC,gBAAiB,uBACvBtB,SAAA;eAAAF,EAAAA,IAACyB,EAAAA,OAAA,CACAC,QAAQ,OACRT,QAASjC,EACT8B,MAAO,MAAAxB,OAAA,EAAAA,EAAcD,OACrB6B,SAAU3B,EACTW,SAAAf,EAAYE,SAEdF,EAAYC,wBAAUY,EAAAA,IAACyB,EAAAA,OAAA,CACtBX,MAAOxB,EAAaF,QACpB6B,QAAShC,EACTsC,GAAIzB,EAAM,CAAC6B,GAAI,GAAG,CAAA,EAClBC,QAASrC,kBAAWS,EAAAA,IAAC6B,EAAAA,SAAiBC,KAAM,GAAIhB,MAAM,YACtDI,SAAU3B,EACTW,SAAAf,EAAYC"}