@erpsquad/common 1.8.6 → 1.8.8

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

@@ -1,108 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,2 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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":"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"}

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

@@ -1,100 +0,0 @@
-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 { axisBottom, axisLeft } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
-import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
-import { monotoneX } from "../../../../node_modules/d3-shape/src/curve/monotone/index.esm.js";
-import curveLinear from "../../../../node_modules/d3-shape/src/curve/linear/index.esm.js";
-import { format } from "../../../../node_modules/d3-format/src/defaultLocale/index.esm.js";
-const formatNumber = (num, symbol, labelType) => {
-  if (labelType === "inPercent") {
-    return `${format(".0%")(num / 100)}`;
-  } else if (labelType === "inValue") {
-    return `${symbol || ""} ${format(".2s")(num).replace("k", "K")}`;
-  }
-  return num.toString();
-};
-const MultiLineChart = ({
-  data,
-  yAxisData,
-  xAxisData,
-  colors = ["steelblue", "orange", "green", "red"],
-  // Default colors
-  height = 400,
-  margin = { top: 20, right: 50, bottom: 30, left: 50 },
-  line: line$1 = false,
-  yAxisLabelType = "inValue",
-  currency,
-  customLabelFormatter
-}) => {
-  const svgRef = useRef(null);
-  const wrapperRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  useEffect(() => {
-  }, [yAxisLabelType]);
-  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(() => {
-    if (containerWidth === 0) return;
-    const svg = select(svgRef.current);
-    svg.selectAll("*").remove();
-    const innerWidth = containerWidth - margin.left - margin.right;
-    const innerHeight = height - margin.top - margin.bottom;
-    const x = linear().domain([0, xAxisData.length]).range([0, innerWidth]);
-    const y = linear().domain([0, max(yAxisData)]).nice().range([innerHeight, 0]);
-    const xAxis = svg.append("g").attr("class", "x-axis").attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(
-      axisBottom(x).ticks(xAxisData.length - 1).tickFormat((d, i) => xAxisData[i])
-    );
-    xAxis.selectAll("text").attr("transform", "translate(20, 10)").style("text-anchor", "middle");
-    xAxis.select(".domain").attr("stroke", "none");
-    const yAxis = svg.append("g").attr("class", "y-axis").attr("transform", `translate(${margin.left},${margin.top})`).call(axisLeft(y).tickPadding(10).tickFormat(
-      (d) => customLabelFormatter ? customLabelFormatter(d) : formatNumber(d, currency, yAxisLabelType)
-    ).tickSizeOuter(0));
-    if (line$1) {
-      yAxis.selectAll(".grid-line").data(y.ticks()).enter().append("line").attr("class", "grid-line").attr("x1", 0).attr("x2", innerWidth).attr("y1", (d) => y(d)).attr("y2", (d) => y(d)).style("stroke", "#ddd").style("stroke-dasharray", "6,3").style("stroke-width", 1);
-    }
-    xAxis.selectAll(".tick line").remove();
-    yAxis.selectAll(".tick line").remove();
-    yAxis.select(".domain").attr("stroke", "none");
-    Object.keys(data).forEach((key, index) => {
-      var _a, _b, _c;
-      if (key !== "months") {
-        const chartLine = line().x((d, i) => x(i)).y((d) => y(d)).curve(data[key].isSmooth ? monotoneX : curveLinear);
-        svg.append("path").datum((_a = data[key]) == null ? void 0 : _a.data).attr("fill", "none").attr("stroke", colors[index % colors.length]).attr("stroke-width", 2).attr("transform", `translate(${margin.left},${margin.top})`).attr("d", chartLine).on("mouseover", function() {
-          select(this).attr("stroke-width", 4);
-        }).on("mouseout", function() {
-          select(this).attr("stroke-width", 2);
-        });
-        if ((_b = data[key]) == null ? void 0 : _b.displayDot) {
-          svg.selectAll(`.circle-${key}`).data((_c = data[key]) == null ? void 0 : _c.data).enter().append("circle").attr("class", `circle-${key}`).attr("cx", (d, i) => x(i) + margin.left).attr("cy", (d) => y(d) + margin.top).attr("r", 4).attr("fill", colors[index % colors.length]).attr("stroke", "white").attr("stroke-width", 1.5).on("mouseover", function() {
-            select(this).attr("r", 6);
-          }).on("mouseout", function() {
-            select(this).attr("r", 4);
-          });
-        }
-      }
-    });
-  }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line$1, yAxisLabelType, currency, customLabelFormatter]);
-  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height, viewBox: `0 0 ${containerWidth} ${height}` }) }) });
-};
-export {
-  MultiLineChart as default
-};
-//# sourceMappingURL=index.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/charts/multiLineChart/multi-line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface IMultiLineChartProps {\n    data: any;\n    width?: number;\n    height?: number;\n    margin?: { top: number, right: number, bottom: number, left: number };\n    yAxisData: any;\n    xAxisData: any;\n    colors?: string[];\n    line?: boolean;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string\n}\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol||''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\n\n\nconst MultiLineChart = ({\n    data,\n    yAxisData,\n    xAxisData,\n    colors = ['steelblue', 'orange', 'green', 'red'], // Default colors\n    height = 400,\n    margin = { top: 20, right: 50, bottom: 30, left: 50 },\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}: IMultiLineChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    useEffect(() => {\n    }, [yAxisLabelType]);\n    // ResizeObserver to adjust the chart size dynamically\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\n    useEffect(() => {\n      \n        if (containerWidth === 0) return; \n\n        const svg = d3.select(svgRef.current);\n        svg.selectAll(\"*\").remove(); \n\n        const innerWidth = containerWidth-margin.left- margin.right;\n        const innerHeight = height - margin.top - margin.bottom;\n\n        // Scales\n        const x = d3.scaleLinear()\n            .domain([0, xAxisData.length]) // Linear scale based on index of xAxisData\n            .range([0, innerWidth]);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(yAxisData) as number])\n            .nice()\n            .range([innerHeight, 0]);\n\n\n        // Append x-axis\n        const xAxis = svg.append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(${margin.left},${height - margin.bottom})`)\n            .call(d3.axisBottom(x)\n                .ticks(xAxisData.length - 1)\n                .tickFormat((d, i) => xAxisData[i])\n            );\n\n        xAxis.selectAll(\"text\")\n            .attr(\"transform\", \"translate(20, 10)\") // Push labels down by 10px\n            .style(\"text-anchor\", \"middle\"); // Keep the labels centered\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Append y-axis\n        const yAxis = svg.append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            )\n                .tickSizeOuter(0) as any,);\n\n        if (line) {\n            yAxis.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '6,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n        xAxis.selectAll(\".tick line\").remove();\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Plot the lines for each dataset\n\n        Object.keys(data).forEach((key, index) => {\n            if (key !== 'months') {\n                const chartLine = d3.line()\n                    .x((d, i) => x(i)) // Use index-based positioning for x-axis\n                    .y((d: any) => y(d)).curve(data[key].isSmooth ? d3.curveMonotoneX : d3.curveLinear);\n                // Append the line\n                svg.append(\"path\")\n                    .datum(data[key]?.data)\n                    .attr(\"fill\", \"none\")\n                    .attr(\"stroke\", colors[index % colors.length])\n                    .attr(\"stroke-width\", 2)\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n                    .attr(\"d\", chartLine)\n                    .on(\"mouseover\", function () {\n                        d3.select(this).attr(\"stroke-width\", 4);\n                    })\n                    .on(\"mouseout\", function () {\n                        d3.select(this).attr(\"stroke-width\", 2);\n                    });\n\n\n\n                // Append circles for each data point\n                if (data[key]?.displayDot) {\n                    svg.selectAll(`.circle-${key}`)\n                        .data(data[key]?.data)\n                        .enter()\n                        .append(\"circle\")\n                        .attr(\"class\", `circle-${key}`)\n                        .attr(\"cx\", (d, i) => x(i) + margin.left) // Adjust for margin.left\n                        .attr(\"cy\", (d: any) => y(d) + margin.top) // Adjust for margin.top\n                        .attr(\"r\", 4) // Circle radius\n                        .attr(\"fill\", colors[index % colors.length])\n                        .attr(\"stroke\", \"white\") // Optional: adds a border for contrast\n                        .attr(\"stroke-width\", 1.5)\n                        .on(\"mouseover\", function () {\n                            d3.select(this).attr(\"r\", 6); // Increase size on hover\n                        })\n                        .on(\"mouseout\", function () {\n                            d3.select(this).attr(\"r\", 4); // Return to normal size\n                        });\n                }\n\n            }\n        });\n    }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line, yAxisLabelType, currency, customLabelFormatter]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} viewBox={`0 0 ${containerWidth} ${height}`} />\n            </div>\n        </div>\n    );\n};\n\nexport default MultiLineChart;\n"],"names":["d3.format","line","d3.select","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","d3.line","d3.curveMonotoneX","d3.curveLinear"],"mappings":"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"}

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

@@ -1,2 +0,0 @@
-"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"),a=require("../../../../node_modules/d3-array/src/max/index.js"),s=require("../../../../node_modules/d3-selection/src/select/index.js"),o=require("../../../../node_modules/d3-axis/src/axis/index.js"),l=require("../../../../node_modules/d3-shape/src/line/index.js"),n=require("../../../../node_modules/d3-shape/src/curve/monotone/index.js"),i=require("../../../../node_modules/d3-shape/src/curve/linear/index.js"),d=require("../../../../node_modules/d3-format/src/defaultLocale/index.js");exports.default=({data:c,yAxisData:u,xAxisData:f,colors:m=["steelblue","orange","green","red"],height:h=400,margin:x={top:20,right:50,bottom:30,left:50},line:p=!1,yAxisLabelType:v="inValue",currency:g,customLabelFormatter:k})=>{const y=t.useRef(null),j=t.useRef(null),[$,b]=t.useState(0);return t.useEffect(()=>{},[v]),t.useEffect(()=>{const e=j.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;b(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===$)return;const e=s.default(y.current);e.selectAll("*").remove();const t=$-x.left-x.right,j=h-x.top-x.bottom,b=r.default().domain([0,f.length]).range([0,t]),w=r.default().domain([0,a.default(u)]).nice().range([j,0]),q=e.append("g").attr("class","x-axis").attr("transform",`translate(${x.left},${h-x.bottom})`).call(o.axisBottom(b).ticks(f.length-1).tickFormat((e,t)=>f[t]));q.selectAll("text").attr("transform","translate(20, 10)").style("text-anchor","middle"),q.select(".domain").attr("stroke","none");const _=e.append("g").attr("class","y-axis").attr("transform",`translate(${x.left},${x.top})`).call(o.axisLeft(w).tickPadding(10).tickFormat(e=>{return k?k(e):(t=e,r=g,"inPercent"===(a=v)?`${d.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${d.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0));p&&_.selectAll(".grid-line").data(w.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",t).attr("y1",e=>w(e)).attr("y2",e=>w(e)).style("stroke","#ddd").style("stroke-dasharray","6,3").style("stroke-width",1),q.selectAll(".tick line").remove(),_.selectAll(".tick line").remove(),_.select(".domain").attr("stroke","none"),Object.keys(c).forEach((t,r)=>{var a,o,d;if("months"!==t){const u=l.default().x((e,t)=>b(t)).y(e=>w(e)).curve(c[t].isSmooth?n.monotoneX:i.default);e.append("path").datum(null==(a=c[t])?void 0:a.data).attr("fill","none").attr("stroke",m[r%m.length]).attr("stroke-width",2).attr("transform",`translate(${x.left},${x.top})`).attr("d",u).on("mouseover",function(){s.default(this).attr("stroke-width",4)}).on("mouseout",function(){s.default(this).attr("stroke-width",2)}),(null==(o=c[t])?void 0:o.displayDot)&&e.selectAll(`.circle-${t}`).data(null==(d=c[t])?void 0:d.data).enter().append("circle").attr("class",`circle-${t}`).attr("cx",(e,t)=>b(t)+x.left).attr("cy",e=>w(e)+x.top).attr("r",4).attr("fill",m[r%m.length]).attr("stroke","white").attr("stroke-width",1.5).on("mouseover",function(){s.default(this).attr("r",6)}).on("mouseout",function(){s.default(this).attr("r",4)})}})},[c,u,f,h,$,m,x,p,v,g,k]),/* @__PURE__ */e.jsx("div",{ref:j,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsx("div",{style:{position:"relative"},children:/* @__PURE__ */e.jsx("svg",{ref:y,width:"100%",height:h,viewBox:`0 0 ${$} ${h}`})})})};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/multiLineChart/multi-line-chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\n\nexport interface IMultiLineChartProps {\n    data: any;\n    width?: number;\n    height?: number;\n    margin?: { top: number, right: number, bottom: number, left: number };\n    yAxisData: any;\n    xAxisData: any;\n    colors?: string[];\n    line?: boolean;\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string\n}\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol||''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\n\n\nconst MultiLineChart = ({\n    data,\n    yAxisData,\n    xAxisData,\n    colors = ['steelblue', 'orange', 'green', 'red'], // Default colors\n    height = 400,\n    margin = { top: 20, right: 50, bottom: 30, left: 50 },\n    line = false,\n    yAxisLabelType = 'inValue',\n    currency,\n    customLabelFormatter,\n}: IMultiLineChartProps) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n\n    useEffect(() => {\n    }, [yAxisLabelType]);\n    // ResizeObserver to adjust the chart size dynamically\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\n    useEffect(() => {\n      \n        if (containerWidth === 0) return; \n\n        const svg = d3.select(svgRef.current);\n        svg.selectAll(\"*\").remove(); \n\n        const innerWidth = containerWidth-margin.left- margin.right;\n        const innerHeight = height - margin.top - margin.bottom;\n\n        // Scales\n        const x = d3.scaleLinear()\n            .domain([0, xAxisData.length]) // Linear scale based on index of xAxisData\n            .range([0, innerWidth]);\n\n        const y = d3.scaleLinear()\n            .domain([0, d3.max(yAxisData) as number])\n            .nice()\n            .range([innerHeight, 0]);\n\n\n        // Append x-axis\n        const xAxis = svg.append(\"g\")\n            .attr(\"class\", \"x-axis\")\n            .attr(\"transform\", `translate(${margin.left},${height - margin.bottom})`)\n            .call(d3.axisBottom(x)\n                .ticks(xAxisData.length - 1)\n                .tickFormat((d, i) => xAxisData[i])\n            );\n\n        xAxis.selectAll(\"text\")\n            .attr(\"transform\", \"translate(20, 10)\") // Push labels down by 10px\n            .style(\"text-anchor\", \"middle\"); // Keep the labels centered\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Append y-axis\n        const yAxis = svg.append(\"g\")\n            .attr(\"class\", \"y-axis\")\n            .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n            .call(d3.axisLeft(y).tickPadding(10).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            )\n                .tickSizeOuter(0) as any,);\n\n        if (line) {\n            yAxis.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '6,3') // Dotted line\n                .style('stroke-width', 1);\n        }\n        xAxis.selectAll(\".tick line\").remove();\n        yAxis.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Plot the lines for each dataset\n\n        Object.keys(data).forEach((key, index) => {\n            if (key !== 'months') {\n                const chartLine = d3.line()\n                    .x((d, i) => x(i)) // Use index-based positioning for x-axis\n                    .y((d: any) => y(d)).curve(data[key].isSmooth ? d3.curveMonotoneX : d3.curveLinear);\n                // Append the line\n                svg.append(\"path\")\n                    .datum(data[key]?.data)\n                    .attr(\"fill\", \"none\")\n                    .attr(\"stroke\", colors[index % colors.length])\n                    .attr(\"stroke-width\", 2)\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n                    .attr(\"d\", chartLine)\n                    .on(\"mouseover\", function () {\n                        d3.select(this).attr(\"stroke-width\", 4);\n                    })\n                    .on(\"mouseout\", function () {\n                        d3.select(this).attr(\"stroke-width\", 2);\n                    });\n\n\n\n                // Append circles for each data point\n                if (data[key]?.displayDot) {\n                    svg.selectAll(`.circle-${key}`)\n                        .data(data[key]?.data)\n                        .enter()\n                        .append(\"circle\")\n                        .attr(\"class\", `circle-${key}`)\n                        .attr(\"cx\", (d, i) => x(i) + margin.left) // Adjust for margin.left\n                        .attr(\"cy\", (d: any) => y(d) + margin.top) // Adjust for margin.top\n                        .attr(\"r\", 4) // Circle radius\n                        .attr(\"fill\", colors[index % colors.length])\n                        .attr(\"stroke\", \"white\") // Optional: adds a border for contrast\n                        .attr(\"stroke-width\", 1.5)\n                        .on(\"mouseover\", function () {\n                            d3.select(this).attr(\"r\", 6); // Increase size on hover\n                        })\n                        .on(\"mouseout\", function () {\n                            d3.select(this).attr(\"r\", 4); // Return to normal size\n                        });\n                }\n\n            }\n        });\n    }, [data, yAxisData, xAxisData, height, containerWidth, colors, margin, line, yAxisLabelType, currency, customLabelFormatter]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} viewBox={`0 0 ${containerWidth} ${height}`} />\n            </div>\n        </div>\n    );\n};\n\nexport default MultiLineChart;\n"],"names":["data","yAxisData","xAxisData","colors","height","margin","top","right","bottom","left","line","yAxisLabelType","currency","customLabelFormatter","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","svg","d3.select","selectAll","remove","innerWidth","innerHeight","x","d3.scaleLinear","domain","length","range","y","d3.max","nice","xAxis","append","attr","call","d3.axisBottom","ticks","tickFormat","d","i","style","select","yAxis","d3.axisLeft","tickPadding","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","enter","Object","keys","forEach","key","index","chartLine","d3.line","curve","isSmooth","d3.curveMonotoneX","d3.curveLinear","datum","_a","on","this","_b","displayDot","_c","jsx","ref","children","position","viewBox"],"mappings":"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"}

package/dist/components/grid/custom-grid-card/custom-grid-card/index.esm.js

@@ -1,131 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { Typography } from "../../../typography/typography/index.esm.js";
-import { formatDate } from "../../../../utils/dateFormat/index.esm.js";
-import Menu from "../../../menu/menu/index.esm.js";
-import Card from "../../../../node_modules/@mui/material/Card/Card/index.esm.js";
-import CardContent from "../../../../node_modules/@mui/material/CardContent/CardContent/index.esm.js";
-import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
-import MenuItem from "../../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
-import { MoreIcon } from "../../../icons/more/index.esm.js";
-const CustomGridCard = ({
-  title,
-  subTitle,
-  children,
-  data,
-  rowActionMenu,
-  destructiveActionMenu
-}) => {
-  const [rowAnchorEl, setRowAnchorEl] = useState(null);
-  const [row, setRow] = useState(null);
-  const handleMenuOpen = (e, currencyRow) => {
-    setRow(currencyRow);
-    setRowAnchorEl(e.currentTarget);
-  };
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      sx: {
-        width: "16.625rem",
-        borderRadius: "0.5rem",
-        border: "0.5px solid #eeeff1",
-        // backgroundColor: 'theme.secondary.100',
-        boxShadow: `
-              0px 0px 2px 0px #e0e0e0,
-              0px 1px 4px -2px rgba(24, 39, 75, 0.02),
-              0px 4px 4px -2px rgba(24, 39, 75, 0.06);`
-        // m: 3
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          CardContent,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              padding: "1rem 1rem 1.25rem 1rem",
-              justifyContent: "space-between",
-              alignItems: "flex-start",
-              flexShrink: 0
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  sx: {
-                    display: "flex",
-                    width: "100%",
-                    justifyContent: "space-between",
-                    alignItems: "flex-start"
-                    // marginBottom: 1
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "theme.secondary.1000", children: title }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        color: "inherit",
-                        size: "small",
-                        onClick: (e) => handleMenuOpen(e, data),
-                        children: /* @__PURE__ */ jsx(
-                          MoreIcon,
-                          {
-                            sx: { transform: "rotate(90deg)" },
-                            orient: "vertical",
-                            fontSize: "small"
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "theme.secondary.800", children: subTitle }) }),
-              children,
-              (data == null ? void 0 : data.created_at) && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Typography, { type: "s4", color: "theme.secondary.800", children: [
-                "Created On ",
-                formatDate(data == null ? void 0 : data.created_at, "DD MMM, YYYY")
-              ] }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Menu,
-          {
-            anchorEl: rowAnchorEl,
-            open: Boolean(rowAnchorEl),
-            onClose: () => setRowAnchorEl(null),
-            children: [
-              /* @__PURE__ */ jsx(Box, { children: rowActionMenu.map((item) => /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: () => {
-                    row && item.handleAction(row);
-                    setRowAnchorEl(null);
-                  },
-                  children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: item.label })
-                }
-              )) }),
-              /* @__PURE__ */ jsx(Box, { className: "dropdown-inner--DestructiveHeader", children: destructiveActionMenu.map((item) => /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: () => {
-                    row && item.handleAction(row);
-                    setRowAnchorEl(null);
-                  },
-                  className: "dropdown-inner--DestructiveActions",
-                  children: /* @__PURE__ */ jsx(Typography, { type: "s4", color: "inherit", children: item.label })
-                }
-              )) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  CustomGridCard as default
-};
-//# sourceMappingURL=index.esm.js.map

package/dist/components/grid/custom-grid-card/custom-grid-card/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/components/grid/custom-grid-card/custom-grid-card.tsx"],"sourcesContent":["import { Box, Card, CardContent, IconButton, MenuItem } from '@mui/material';\nimport React, { useState } from 'react';\nimport Typography, { ITypography } from '../../typography/typography';\nimport { MoreIcon } from '../../icons';\nimport { formatDate } from '../../../utils/dateFormat';\n// import Chip from '../../chip/chip';\nimport Menu from '../../menu/menu';\n\ninterface CustomGridCardProps {\n\ttitle: React.ReactNode | string;\n\tsubTitle?: React.ReactNode | string;\n\tchildren?: React.ReactNode | string;\n\ttitleProps?: ITypography;\n\tdata: Record<any, any>;\n\trowActionMenu: any[];\n\tdestructiveActionMenu: any[];\n}\n\nconst CustomGridCard: React.FC<CustomGridCardProps> = ({\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tdata,\n\trowActionMenu,\n\tdestructiveActionMenu\n}) => {\n\tconst [rowAnchorEl, setRowAnchorEl] = useState<HTMLElement | null>(null);\n\tconst [row, setRow] = useState<[] | null>(null);\n\n\tconst handleMenuOpen = (\n\t\te: React.MouseEvent<HTMLButtonElement>,\n\t\tcurrencyRow: []\n\t) => {\n\t\tsetRow(currencyRow);\n\t\tsetRowAnchorEl(e.currentTarget);\n\t};\n\n\treturn (\n\t\t<Card\n\t\t\tsx={{\n\t\t\t\twidth: '16.625rem',\n\t\t\t\tborderRadius: '0.5rem',\n\t\t\t\tborder: '0.5px solid #eeeff1',\n\t\t\t\t// backgroundColor: 'theme.secondary.100',\n\t\t\t\tboxShadow: `\n              0px 0px 2px 0px #e0e0e0,\n              0px 1px 4px -2px rgba(24, 39, 75, 0.02),\n              0px 4px 4px -2px rgba(24, 39, 75, 0.06);`\n\t\t\t\t// m: 3\n\t\t\t}}>\n\t\t\t<CardContent\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tpadding: '1rem 1rem 1.25rem 1rem',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\tflexShrink: 0\n\t\t\t\t}}>\n\t\t\t\t{/* Title & More Button */}\n\t\t\t\t<Box\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'flex-start'\n\t\t\t\t\t\t// marginBottom: 1\n\t\t\t\t\t}}>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tcolor='inherit'\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\tonClick={(e) => handleMenuOpen(e, data)}>\n\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\tsx={{ transform: 'rotate(90deg)' }}\n\t\t\t\t\t\t\torient='vertical'\n\t\t\t\t\t\t\tfontSize='small'\n\t\t\t\t\t\t/>\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t\t{/* Sub Title */}\n\t\t\t\t<Box>\n\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t{subTitle}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{children}\n\t\t\t\t{data?.created_at && (\n\t\t\t\t\t<Box>\n\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t\tCreated On {formatDate(data?.created_at, 'DD MMM, YYYY')}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</CardContent>\n\n\t\t\t{/* Action Menu */}\n\t\t\t<Menu\n\t\t\t\tanchorEl={rowAnchorEl}\n\t\t\t\topen={Boolean(rowAnchorEl)}\n\t\t\t\tonClose={() => setRowAnchorEl(null)}>\n\t\t\t\t<Box>\n\t\t\t\t\t{rowActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t<Box className='dropdown-inner--DestructiveHeader'>\n\t\t\t\t\t{destructiveActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName='dropdown-inner--DestructiveActions'>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t</Menu>\n\t\t</Card>\n\t);\n};\n\nexport default CustomGridCard;\n"],"names":[],"mappings":"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"}

package/dist/components/grid/custom-grid-card/custom-grid-card/index.js

@@ -1,11 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../typography/typography/index.js"),n=require("../../../../utils/dateFormat/index.js"),i=require("../../../menu/menu/index.js"),l=require("../../../../node_modules/@mui/material/Card/Card/index.js"),a=require("../../../../node_modules/@mui/material/CardContent/CardContent/index.js"),d=require("../../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../../node_modules/@mui/material/IconButton/IconButton/index.js"),s=require("../../../../node_modules/@mui/material/MenuItem/MenuItem/index.js"),u=require("../../../icons/more/index.js");exports.default=({title:c,subTitle:x,children:p,data:m,rowActionMenu:h,destructiveActionMenu:j})=>{const[y,f]=r.useState(null),[g,C]=r.useState(null);/* @__PURE__ */
-return e.jsxs(l.default,{sx:{width:"16.625rem",borderRadius:"0.5rem",border:"0.5px solid #eeeff1",boxShadow:"\n              0px 0px 2px 0px #e0e0e0,\n              0px 1px 4px -2px rgba(24, 39, 75, 0.02),\n              0px 4px 4px -2px rgba(24, 39, 75, 0.06);"},children:[
-/* @__PURE__ */e.jsxs(a.default,{sx:{display:"flex",flexDirection:"column",padding:"1rem 1rem 1.25rem 1rem",justifyContent:"space-between",alignItems:"flex-start",flexShrink:0},children:[
-/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",width:"100%",justifyContent:"space-between",alignItems:"flex-start"},children:[
-/* @__PURE__ */e.jsx(t.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:c}),
-/* @__PURE__ */e.jsx(o.default,{color:"inherit",size:"small",onClick:e=>((e,r)=>{C(r),f(e.currentTarget)})(e,m),children:/* @__PURE__ */e.jsx(u.MoreIcon,{sx:{transform:"rotate(90deg)"},orient:"vertical",fontSize:"small"})})]}),
-/* @__PURE__ */e.jsx(d.default,{children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.800",children:x})}),p,(null==m?void 0:m.created_at)&&/* @__PURE__ */e.jsx(d.default,{children:/* @__PURE__ */e.jsxs(t.Typography,{type:"s4",color:"theme.secondary.800",children:["Created On ",n.formatDate(null==m?void 0:m.created_at,"DD MMM, YYYY")]})})]}),
-/* @__PURE__ */e.jsxs(i.default,{anchorEl:y,open:Boolean(y),onClose:()=>f(null),children:[
-/* @__PURE__ */e.jsx(d.default,{children:h.map(r=>/* @__PURE__ */e.jsx(s.default,{onClick:()=>{g&&r.handleAction(g),f(null)},children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"inherit",children:r.label})}))}),
-/* @__PURE__ */e.jsx(d.default,{className:"dropdown-inner--DestructiveHeader",children:j.map(r=>/* @__PURE__ */e.jsx(s.default,{onClick:()=>{g&&r.handleAction(g),f(null)},className:"dropdown-inner--DestructiveActions",children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"inherit",children:r.label})}))})]})]})};
-//# sourceMappingURL=index.js.map

package/dist/components/grid/custom-grid-card/custom-grid-card/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/grid/custom-grid-card/custom-grid-card.tsx"],"sourcesContent":["import { Box, Card, CardContent, IconButton, MenuItem } from '@mui/material';\nimport React, { useState } from 'react';\nimport Typography, { ITypography } from '../../typography/typography';\nimport { MoreIcon } from '../../icons';\nimport { formatDate } from '../../../utils/dateFormat';\n// import Chip from '../../chip/chip';\nimport Menu from '../../menu/menu';\n\ninterface CustomGridCardProps {\n\ttitle: React.ReactNode | string;\n\tsubTitle?: React.ReactNode | string;\n\tchildren?: React.ReactNode | string;\n\ttitleProps?: ITypography;\n\tdata: Record<any, any>;\n\trowActionMenu: any[];\n\tdestructiveActionMenu: any[];\n}\n\nconst CustomGridCard: React.FC<CustomGridCardProps> = ({\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tdata,\n\trowActionMenu,\n\tdestructiveActionMenu\n}) => {\n\tconst [rowAnchorEl, setRowAnchorEl] = useState<HTMLElement | null>(null);\n\tconst [row, setRow] = useState<[] | null>(null);\n\n\tconst handleMenuOpen = (\n\t\te: React.MouseEvent<HTMLButtonElement>,\n\t\tcurrencyRow: []\n\t) => {\n\t\tsetRow(currencyRow);\n\t\tsetRowAnchorEl(e.currentTarget);\n\t};\n\n\treturn (\n\t\t<Card\n\t\t\tsx={{\n\t\t\t\twidth: '16.625rem',\n\t\t\t\tborderRadius: '0.5rem',\n\t\t\t\tborder: '0.5px solid #eeeff1',\n\t\t\t\t// backgroundColor: 'theme.secondary.100',\n\t\t\t\tboxShadow: `\n              0px 0px 2px 0px #e0e0e0,\n              0px 1px 4px -2px rgba(24, 39, 75, 0.02),\n              0px 4px 4px -2px rgba(24, 39, 75, 0.06);`\n\t\t\t\t// m: 3\n\t\t\t}}>\n\t\t\t<CardContent\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tpadding: '1rem 1rem 1.25rem 1rem',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t\tflexShrink: 0\n\t\t\t\t}}>\n\t\t\t\t{/* Title & More Button */}\n\t\t\t\t<Box\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'flex-start'\n\t\t\t\t\t\t// marginBottom: 1\n\t\t\t\t\t}}>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tcolor='inherit'\n\t\t\t\t\t\tsize='small'\n\t\t\t\t\t\tonClick={(e) => handleMenuOpen(e, data)}>\n\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\tsx={{ transform: 'rotate(90deg)' }}\n\t\t\t\t\t\t\torient='vertical'\n\t\t\t\t\t\t\tfontSize='small'\n\t\t\t\t\t\t/>\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Box>\n\t\t\t\t{/* Sub Title */}\n\t\t\t\t<Box>\n\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t{subTitle}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{children}\n\t\t\t\t{data?.created_at && (\n\t\t\t\t\t<Box>\n\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.800'>\n\t\t\t\t\t\t\tCreated On {formatDate(data?.created_at, 'DD MMM, YYYY')}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</CardContent>\n\n\t\t\t{/* Action Menu */}\n\t\t\t<Menu\n\t\t\t\tanchorEl={rowAnchorEl}\n\t\t\t\topen={Boolean(rowAnchorEl)}\n\t\t\t\tonClose={() => setRowAnchorEl(null)}>\n\t\t\t\t<Box>\n\t\t\t\t\t{rowActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t<Box className='dropdown-inner--DestructiveHeader'>\n\t\t\t\t\t{destructiveActionMenu.map((item) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\trow && item.handleAction(row);\n\t\t\t\t\t\t\t\tsetRowAnchorEl(null);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName='dropdown-inner--DestructiveActions'>\n\t\t\t\t\t\t\t<Typography type='s4' color='inherit'>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t</Menu>\n\t\t</Card>\n\t);\n};\n\nexport default CustomGridCard;\n"],"names":["title","subTitle","children","data","rowActionMenu","destructiveActionMenu","rowAnchorEl","setRowAnchorEl","useState","row","setRow","jsxs","Card","sx","width","borderRadius","border","boxShadow","CardContent","display","flexDirection","padding","justifyContent","alignItems","flexShrink","Box","jsx","Typography","type","weight","color","IconButton","size","onClick","e","currencyRow","currentTarget","handleMenuOpen","MoreIcon","transform","orient","fontSize","created_at","formatDate","Menu","anchorEl","open","Boolean","onClose","map","item","MenuItem","handleAction","label","className"],"mappings":"wsBAkBsD,EACrDA,QACAC,WACAC,WACAC,OACAC,gBACAC,4BAEA,MAAOC,EAAaC,GAAkBC,EAAAA,SAA6B,OAC5DC,EAAKC,GAAUF,EAAAA,SAAoB;AAU1C,OACCG,EAAAA,KAACC,EAAAA,QAAA,CACAC,GAAI,CACHC,MAAO,YACPC,aAAc,SACdC,OAAQ,sBAERC,UAAW,4JAMZf,SAAA;eAAAS,EAAAA,KAACO,EAAAA,QAAA,CACAL,GAAI,CACHM,QAAS,OACTC,cAAe,SACfC,QAAS,yBACTC,eAAgB,gBAChBC,WAAY,aACZC,WAAY,GAGbtB,SAAA;eAAAS,EAAAA,KAACc,EAAAA,QAAA,CACAZ,GAAI,CACHM,QAAS,OACTL,MAAO,OACPQ,eAAgB,gBAChBC,WAAY,cAGbrB,SAAA;eAAAwB,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1C5B,SAAAF;eAEF0B,EAAAA,IAACK,EAAAA,QAAA,CACAD,MAAM,UACNE,KAAK,QACLC,QAAUC,GA7CQ,EACtBA,EACAC,KAEAzB,EAAOyB,GACP5B,EAAe2B,EAAEE,gBAwCGC,CAAeH,EAAG/B,GAClCD,wBAAAwB,EAAAA,IAACY,EAAAA,SAAA,CACAzB,GAAI,CAAE0B,UAAW,iBACjBC,OAAO,WACPC,SAAS;iBAKZf,IAACD,EAAAA,SACAvB,0BAAAwB,IAACC,EAAAA,WAAA,CAAWC,KAAK,KAAKE,MAAM,sBAC1B5B,SAAAD,MAGFC,SACAC,WAAMuC,4BACNhB,EAAAA,IAACD,EAAAA,QAAA,CACAvB,+BAACyB,EAAAA,WAAA,CAAWC,KAAK,KAAKE,MAAM,sBAAsB5B,SAAA,CAAA,cACrCyC,aAAW,MAAAxC,OAAA,EAAAA,EAAMuC,WAAY;eAO7C/B,EAAAA,KAACiC,EAAAA,QAAA,CACAC,SAAUvC,EACVwC,KAAMC,QAAQzC,GACd0C,QAAS,IAAMzC,EAAe,MAC9BL,SAAA;eAAAwB,EAAAA,IAACD,EAAAA,QAAA,CACCvB,SAAAE,EAAc6C,IAAKC,kBACnBxB,EAAAA,IAACyB,EAAAA,QAAA,CACAlB,QAAS,KACRxB,GAAOyC,EAAKE,aAAa3C,GACzBF,EAAe,OAEhBL,8BAACyB,aAAA,CAAWC,KAAK,KAAKE,MAAM,UAC1B5B,WAAKmD;qBAKT5B,EAAAA,QAAA,CAAI6B,UAAU,oCACbpD,SAAAG,EAAsB4C,IAAKC,kBAC3BxB,EAAAA,IAACyB,EAAAA,QAAA,CACAlB,QAAS,KACRxB,GAAOyC,EAAKE,aAAa3C,GACzBF,EAAe,OAEhB+C,UAAU,qCACVpD,8BAACyB,aAAA,CAAWC,KAAK,KAAKE,MAAM,UAC1B5B,WAAKmD"}