@erpsquad/common 1.8.75 → 1.8.77

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

@@ -0,0 +1,20 @@
+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-line-chart.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface LineChartProps {
+    data: DataPoint[];
+    width?: number | string;
+    height?: number | string;
+    lineColor?: string;
+    lineFillColor?: string;
+}
+declare const AreaLineChart: React.FC<LineChartProps>;
+export default AreaLineChart;

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

@@ -5,7 +5,7 @@ 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 AreaLineChart = ({
+const AreaLineChartTwo = ({
   data,
   width = "100%",
   // Default to responsive width
@@ -50,6 +50,6 @@ const AreaLineChart = ({
   return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width, height }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height: "100%", ...rest }) });
 };
 export {
-  AreaLineChart as default
+  AreaLineChartTwo as default
 };
 //# sourceMappingURL=index.esm.js.map

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

@@ -1 +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 AreaLineChart: 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 AreaLineChart;\n"],"names":["d3.select","d3.scaleLinear","d3.max","line","d3.line","area","d3.area"],"mappings":";;;;;;;AAgBA,MAAM,gBAA0C,CAAC;AAAA,EAC/C;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;"}
+{"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.map

@@ -1 +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 AreaLineChart: 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 AreaLineChart;\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":"sdAgBgD,EAC9CA,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"}
+{"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/area-lineChart.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface LineChartProps {
+    data: DataPoint[];
+    width?: number | string;
+    height?: number | string;
+    lineColor?: string;
+    lineFillColor?: string;
+}
+declare const AreaLineChartTwo: React.FC<LineChartProps>;
+export default AreaLineChartTwo;

package/dist/components/charts/line-chart/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AreaLineChart } from './area-line-chart';
+export * from './area-line-chart';
+export { default as AreaLineChartTwo } from './area-lineChart';
+export * from './area-lineChart';
+export { default as LineChart } from './line-chart';
+export * from './line-chart';

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface LineChartProps {
+    data: DataPoint[];
+    numOfLines?: number;
+    width?: number;
+    height?: number;
+}
+declare const LineChart: React.FC<LineChartProps>;
+export default LineChart;

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

@@ -0,0 +1,2 @@
+export { default as MultiLineChart } from './multi-line-chart';
+export * from './multi-line-chart';

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

@@ -95,6 +95,7 @@ const MultiLineChart = ({
   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,
   MultiLineChart as default
 };
 //# sourceMappingURL=index.esm.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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 { MultiLineChart };\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 +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"),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}`})})})};
+"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"),n=require("../../../../node_modules/d3-shape/src/line/index.js"),l=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");const c=({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=n.default().x((e,t)=>b(t)).y(e=>w(e)).curve(c[t].isSmooth?l.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}`})})})};exports.MultiLineChart=c,exports.default=c;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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 { MultiLineChart };\nexport default MultiLineChart;\n"],"names":["MultiLineChart","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/charts/multiLineChart/multi-line-chart.d.ts

@@ -0,0 +1,21 @@
+export interface IMultiLineChartProps {
+    data: any;
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    yAxisData: any;
+    xAxisData: any;
+    colors?: string[];
+    line?: boolean;
+    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';
+    customLabelFormatter?: (value: number) => string;
+    currency?: string;
+}
+declare const MultiLineChart: ({ data, yAxisData, xAxisData, colors, height, margin, line, yAxisLabelType, currency, customLabelFormatter, }: IMultiLineChartProps) => import("react/jsx-runtime").JSX.Element;
+export { MultiLineChart };
+export default MultiLineChart;

package/dist/components/checkbox/checkbox/index.esm.js

@@ -33,6 +33,7 @@ const Checkbox = memo((props) => {
   );
 });
 export {
+  Checkbox,
   Checkbox as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/checkbox/checkbox/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size || 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size || 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport default Checkbox;\n"],"names":["MUICheckbox"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,OAAOA,UAAW,EAAE,CAAC,EAAE,OAAO,EAAE,QAAA,QAAU;;AAAO;AAAA,IACvE,SAAS;AAAA,IACT,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAChC,cAAc;AAAA,IACd,iBAAiB;AAAA,MAChB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAC9B,WAAW;AAAA,QACV,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAAG;AAAA,IAClC;AAAA,IAED,kBAAkB;AAAA,MACjB,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAAG;AAAA,EAErC;AAAA,CAAE;AAEF,MAAM,WAAW,KAAK,CAAC,UAAyB;AAC/C,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAO,SAAQ,SAAS;AAAA,MACxD,aAAa,oBAAC,cAAA,EAAa,WAAU,+BAAO,SAAQ,SAAS;AAAA,MAC7D,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size || 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size || 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport { Checkbox };\nexport default Checkbox;\n"],"names":["MUICheckbox"],"mappings":";;;;;;AAIA,MAAM,iBAAiB,OAAOA,UAAW,EAAE,CAAC,EAAE,OAAO,EAAE,QAAA,QAAU;;AAAO;AAAA,IACvE,SAAS;AAAA,IACT,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAChC,cAAc;AAAA,IACd,iBAAiB;AAAA,MAChB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAC9B,WAAW;AAAA,QACV,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,MAAG;AAAA,IAClC;AAAA,IAED,kBAAkB;AAAA,MACjB,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,IAAG;AAAA,EAErC;AAAA,CAAE;AAEF,MAAM,WAAW,KAAK,CAAC,UAAyB;AAC/C,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAM,oBAAC,gBAAA,EAAe,WAAU,+BAAO,SAAQ,SAAS;AAAA,MACxD,aAAa,oBAAC,cAAA,EAAa,WAAU,+BAAO,SAAQ,SAAS;AAAA,MAC7D,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/checkbox/checkbox/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../node_modules/@mui/material/styles/styled/index.js"),i=require("../../icons/check-box/index.js"),l=require("../../icons/rectangle/index.js"),d=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");const s=o.default(d.default)(({theme:{palette:e}})=>{var r,o,i,l;return{padding:"0rem",color:null==(r=e.theme)?void 0:r.secondary[300],borderRadius:".625rem","&.Mui-checked":{color:null==(o=e.theme)?void 0:o.primary[600],"&:hover":{color:null==(i=e.theme)?void 0:i.primary[500]}},"&.Mui-disabled":{color:null==(l=e.theme)?void 0:l.secondary[400]}}}),n=r.memo(r=>/* @__PURE__ */e.jsx(s,{icon:/* @__PURE__ */e.jsx(l.RecgtangleIcon,{fontSize:(null==r?void 0:r.size)||"small"}),checkedIcon:/* @__PURE__ */e.jsx(i.CheckBoxIcon,{fontSize:(null==r?void 0:r.size)||"small"}),disableRipple:!0,...r}));exports.default=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../../node_modules/@mui/material/styles/styled/index.js"),i=require("../../icons/check-box/index.js"),l=require("../../icons/rectangle/index.js"),d=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");const s=o.default(d.default)(({theme:{palette:e}})=>{var r,o,i,l;return{padding:"0rem",color:null==(r=e.theme)?void 0:r.secondary[300],borderRadius:".625rem","&.Mui-checked":{color:null==(o=e.theme)?void 0:o.primary[600],"&:hover":{color:null==(i=e.theme)?void 0:i.primary[500]}},"&.Mui-disabled":{color:null==(l=e.theme)?void 0:l.secondary[400]}}}),t=r.memo(r=>/* @__PURE__ */e.jsx(s,{icon:/* @__PURE__ */e.jsx(l.RecgtangleIcon,{fontSize:(null==r?void 0:r.size)||"small"}),checkedIcon:/* @__PURE__ */e.jsx(i.CheckBoxIcon,{fontSize:(null==r?void 0:r.size)||"small"}),disableRipple:!0,...r}));exports.Checkbox=t,exports.default=t;
 //# sourceMappingURL=index.js.map

package/dist/components/checkbox/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size || 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size || 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport default Checkbox;\n"],"names":["StyledCheckbox","styled","MUICheckbox","theme","palette","padding","color","_a","secondary","borderRadius","_b","primary","_c","_d","Checkbox","memo","props","jsx","icon","RecgtangleIcon","fontSize","size","checkedIcon","CheckBoxIcon","disableRipple"],"mappings":"sWAIA,MAAMA,EAAiBC,EAAAA,QAAOC,UAAPD,CAAoB,EAAGE,OAASC,2BAAiB,MAAA,CACvEC,QAAS,OACTC,MAAO,OAAAC,EAAAH,EAAQD,YAAR,EAAAI,EAAeC,UAAU,KAChCC,aAAc,UACd,gBAAiB,CAChBH,MAAO,OAAAI,EAAAN,EAAQD,YAAR,EAAAO,EAAeC,QAAQ,KAC9B,UAAW,CACVL,MAAO,OAAAM,EAAAR,EAAQD,YAAR,EAAAS,EAAeD,QAAQ,OAGhC,iBAAkB,CACjBL,MAAO,OAAAO,EAAAT,EAAQD,YAAR,EAAAU,EAAeL,UAAU,SAI5BM,EAAWC,EAAAA,KAAMC,kBAErBC,EAAAA,IAACjB,EAAA,CACAkB,oBAAMD,EAAAA,IAACE,iBAAA,CAAeC,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UAC/CC,2BAAaL,EAAAA,IAACM,eAAA,CAAaH,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UACpDG,eAAa,KACTR"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { CheckboxProps, Checkbox as MUICheckbox, styled } from '@mui/material';\nimport { CheckBoxIcon, RecgtangleIcon } from '../icons';\nimport { memo } from 'react';\n\nconst StyledCheckbox = styled(MUICheckbox)(({ theme: { palette } }) => ({\n\tpadding: '0rem',\n\tcolor: palette.theme?.secondary[300],\n\tborderRadius: '.625rem',\n\t'&.Mui-checked': {\n\t\tcolor: palette.theme?.primary[600],\n\t\t'&:hover': {\n\t\t\tcolor: palette.theme?.primary[500]\n\t\t}\n\t},\n\t'&.Mui-disabled': {\n\t\tcolor: palette.theme?.secondary[400]\n\t}\n}));\n\nconst Checkbox = memo((props: CheckboxProps) => {\n\treturn (\n\t\t<StyledCheckbox\n\t\t\ticon={<RecgtangleIcon fontSize={props?.size || 'small'} />}\n\t\t\tcheckedIcon={<CheckBoxIcon fontSize={props?.size || 'small'} />}\n\t\t\tdisableRipple\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nexport { Checkbox };\nexport default Checkbox;\n"],"names":["StyledCheckbox","styled","MUICheckbox","theme","palette","padding","color","_a","secondary","borderRadius","_b","primary","_c","_d","Checkbox","memo","props","jsx","icon","RecgtangleIcon","fontSize","size","checkedIcon","CheckBoxIcon","disableRipple"],"mappings":"sWAIA,MAAMA,EAAiBC,EAAAA,QAAOC,UAAPD,CAAoB,EAAGE,OAASC,2BAAiB,MAAA,CACvEC,QAAS,OACTC,MAAO,OAAAC,EAAAH,EAAQD,YAAR,EAAAI,EAAeC,UAAU,KAChCC,aAAc,UACd,gBAAiB,CAChBH,MAAO,OAAAI,EAAAN,EAAQD,YAAR,EAAAO,EAAeC,QAAQ,KAC9B,UAAW,CACVL,MAAO,OAAAM,EAAAR,EAAQD,YAAR,EAAAS,EAAeD,QAAQ,OAGhC,iBAAkB,CACjBL,MAAO,OAAAO,EAAAT,EAAQD,YAAR,EAAAU,EAAeL,UAAU,SAI5BM,EAAWC,EAAAA,KAAMC,kBAErBC,EAAAA,IAACjB,EAAA,CACAkB,oBAAMD,EAAAA,IAACE,iBAAA,CAAeC,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UAC/CC,2BAAaL,EAAAA,IAACM,eAAA,CAAaH,UAAU,MAAAJ,OAAA,EAAAA,EAAOK,OAAQ,UACpDG,eAAa,KACTR"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxProps } from '@mui/material';
+
+declare const Checkbox: import('react').NamedExoticComponent<CheckboxProps>;
+export { Checkbox };
+export default Checkbox;

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

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './checkbox';
+export * from './checkbox';

package/dist/components/chip/chip/index.esm.js

@@ -85,6 +85,7 @@ const Chip = (props) => {
   );
 };
 export {
+  Chip,
   Chip as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/chip/chip/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Chip as MUIChip, ChipProps, styled } from \"@mui/material\";\n\ninterface IChip extends ChipProps {\n  type?: \"rounded\" | \"normal\";\n  active?: boolean;\n  inActive?: boolean;\n  label?: string | React.ReactNode | number | JSX.Element;\n}\n\nconst StyledChip = styled(MUIChip)<IChip>(\n  ({ theme: { palette }, active, type, inActive }) => ({\n    cursor: \"pointer\",\n    fontSize: \".75rem\",\n    color: palette.theme?.secondary[800],\n    borderRadius: type === \"rounded\" ? \"1.5rem\" : \"0.25rem\",\n    backgroundColor: palette.theme?.secondary[200],\n    ...(active && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.primary[700],\n        backgroundColor: palette.theme?.primary[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.primary[800],\n        borderColor: palette.theme?.primary[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n    }),\n    ...(inActive && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.error[700],\n        backgroundColor: palette.theme?.error[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.error[800],\n        borderColor: palette.theme?.error[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n    }),\n\n    \"& .MuiChip-icon\": {\n      marginRight: \"0.125rem\",\n      marginLeft: \"0rem\",\n      color: \"inherit\",\n    },\n    \"& .MuiChip-deleteIcon\": {\n      marginLeft: \"0.25rem\",\n      fontSize: \".875rem\",\n      color: \"inherit\",\n      marginRight: \"0rem\",\n    },\n    \"&.MuiChip-root\": {\n      height: \"fit-content\",\n      padding: \"0.25rem 0.5rem\",\n      \".MuiChip-label\": {\n        padding: \"0rem\",\n      },\n    },\n  }),\n);\n\nconst Chip = (props: IChip) => {\n  const {\n    label,\n    type = \"rounded\",\n    variant = \"filled\",\n    active = false,\n    inActive = false,\n    ...rest\n  } = props;\n\n  return (\n    <StyledChip\n      label={label}\n      variant={variant}\n      active={active}\n      inActive={inActive}\n      type={type}\n      {...rest}\n    />\n  );\n};\n\nexport default Chip;\n"],"names":["MUIChip"],"mappings":";;;AASA,MAAM,aAAa,OAAOA,MAAO;AAAA,EAC/B,CAAC,EAAE,OAAO,EAAE,WAAW,QAAQ,MAAM,eAAS;;AAAO;AAAA,MACnD,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,MAChC,cAAc,SAAS,YAAY,WAAW;AAAA,MAC9C,kBAAiB,aAAQ,UAAR,mBAAe,UAAU;AAAA,MAC1C,GAAI,UAAU;AAAA,QACZ,oBAAoB;AAAA,UAClB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAC9B,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UACxC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAAG;AAAA,QAC7C;AAAA,QAEF,sBAAsB;AAAA,UACpB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAC9B,cAAa,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UACpC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,MAEF,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,UAClB,QAAO,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAC5B,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UACtC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAAG;AAAA,QAC3C;AAAA,QAEF,sBAAsB;AAAA,UACpB,QAAO,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAC5B,cAAa,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAClC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAAG;AAAA,QAC3C;AAAA,MACF;AAAA,MAGF,mBAAmB;AAAA,QACjB,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,OAAO;AAAA,MAAA;AAAA,MAET,yBAAyB;AAAA,QACvB,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,MAEf,kBAAkB;AAAA,QAChB,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,kBAAkB;AAAA,UAChB,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA;AAEJ;AAEA,MAAM,OAAO,CAAC,UAAiB;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Chip as MUIChip, ChipProps, styled } from \"@mui/material\";\n\ninterface IChip extends ChipProps {\n  type?: \"rounded\" | \"normal\";\n  active?: boolean;\n  inActive?: boolean;\n  label?: string | React.ReactNode | number | JSX.Element;\n}\n\nconst StyledChip = styled(MUIChip)<IChip>(\n  ({ theme: { palette }, active, type, inActive }) => ({\n    cursor: \"pointer\",\n    fontSize: \".75rem\",\n    color: palette.theme?.secondary[800],\n    borderRadius: type === \"rounded\" ? \"1.5rem\" : \"0.25rem\",\n    backgroundColor: palette.theme?.secondary[200],\n    ...(active && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.primary[700],\n        backgroundColor: palette.theme?.primary[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.primary[800],\n        borderColor: palette.theme?.primary[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n    }),\n    ...(inActive && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.error[700],\n        backgroundColor: palette.theme?.error[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.error[800],\n        borderColor: palette.theme?.error[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n    }),\n\n    \"& .MuiChip-icon\": {\n      marginRight: \"0.125rem\",\n      marginLeft: \"0rem\",\n      color: \"inherit\",\n    },\n    \"& .MuiChip-deleteIcon\": {\n      marginLeft: \"0.25rem\",\n      fontSize: \".875rem\",\n      color: \"inherit\",\n      marginRight: \"0rem\",\n    },\n    \"&.MuiChip-root\": {\n      height: \"fit-content\",\n      padding: \"0.25rem 0.5rem\",\n      \".MuiChip-label\": {\n        padding: \"0rem\",\n      },\n    },\n  }),\n);\n\nconst Chip = (props: IChip) => {\n  const {\n    label,\n    type = \"rounded\",\n    variant = \"filled\",\n    active = false,\n    inActive = false,\n    ...rest\n  } = props;\n\n  return (\n    <StyledChip\n      label={label}\n      variant={variant}\n      active={active}\n      inActive={inActive}\n      type={type}\n      {...rest}\n    />\n  );\n};\n\nexport { Chip };\nexport default Chip;\n"],"names":["MUIChip"],"mappings":";;;AASA,MAAM,aAAa,OAAOA,MAAO;AAAA,EAC/B,CAAC,EAAE,OAAO,EAAE,WAAW,QAAQ,MAAM,eAAS;;AAAO;AAAA,MACnD,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAO,aAAQ,UAAR,mBAAe,UAAU;AAAA,MAChC,cAAc,SAAS,YAAY,WAAW;AAAA,MAC9C,kBAAiB,aAAQ,UAAR,mBAAe,UAAU;AAAA,MAC1C,GAAI,UAAU;AAAA,QACZ,oBAAoB;AAAA,UAClB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAC9B,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UACxC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAAG;AAAA,QAC7C;AAAA,QAEF,sBAAsB;AAAA,UACpB,QAAO,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAC9B,cAAa,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UACpC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,QAAQ;AAAA,UAAG;AAAA,QAC7C;AAAA,MACF;AAAA,MAEF,GAAI,YAAY;AAAA,QACd,oBAAoB;AAAA,UAClB,QAAO,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAC5B,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UACtC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAAG;AAAA,QAC3C;AAAA,QAEF,sBAAsB;AAAA,UACpB,QAAO,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAC5B,cAAa,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAClC,WAAW;AAAA,YACT,kBAAiB,aAAQ,UAAR,mBAAe,MAAM;AAAA,UAAG;AAAA,QAC3C;AAAA,MACF;AAAA,MAGF,mBAAmB;AAAA,QACjB,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,OAAO;AAAA,MAAA;AAAA,MAET,yBAAyB;AAAA,QACvB,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,MAEf,kBAAkB;AAAA,QAChB,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,kBAAkB;AAAA,UAChB,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IACF;AAAA;AAEJ;AAEA,MAAM,OAAO,CAAC,UAAiB;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/chip/chip/index.js

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../node_modules/@mui/material/styles/styled/index.js"),o=require("../../../node_modules/@mui/material/Chip/Chip/index.js");const i=r.default(o.default)(({theme:{palette:e},active:r,type:o,inActive:i})=>{var l,t,n,d,u,a,m,h,c,v,p,s,C,g;return{cursor:"pointer",fontSize:".75rem",color:null==(l=e.theme)?void 0:l.secondary[800],borderRadius:"rounded"===o?"1.5rem":"0.25rem",backgroundColor:null==(t=e.theme)?void 0:t.secondary[200],...r&&{"&.MuiChip-filled":{color:null==(n=e.theme)?void 0:n.primary[700],backgroundColor:null==(d=e.theme)?void 0:d.primary[200],"&:hover":{backgroundColor:null==(u=e.theme)?void 0:u.primary[200]}},"&.MuiChip-outlined":{color:null==(a=e.theme)?void 0:a.primary[800],borderColor:null==(m=e.theme)?void 0:m.primary[300],"&:hover":{backgroundColor:null==(h=e.theme)?void 0:h.primary[200]}}},...i&&{"&.MuiChip-filled":{color:null==(c=e.theme)?void 0:c.error[700],backgroundColor:null==(v=e.theme)?void 0:v.error[200],"&:hover":{backgroundColor:null==(p=e.theme)?void 0:p.error[200]}},"&.MuiChip-outlined":{color:null==(s=e.theme)?void 0:s.error[800],borderColor:null==(C=e.theme)?void 0:C.error[300],"&:hover":{backgroundColor:null==(g=e.theme)?void 0:g.error[200]}}},"& .MuiChip-icon":{marginRight:"0.125rem",marginLeft:"0rem",color:"inherit"},"& .MuiChip-deleteIcon":{marginLeft:"0.25rem",fontSize:".875rem",color:"inherit",marginRight:"0rem"},"&.MuiChip-root":{height:"fit-content",padding:"0.25rem 0.5rem",".MuiChip-label":{padding:"0rem"}}}});exports.default=r=>{const{label:o,type:l="rounded",variant:t="filled",active:n=!1,inActive:d=!1,...u}=r;/* @__PURE__ */
-return e.jsx(i,{label:o,variant:t,active:n,inActive:d,type:l,...u})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../node_modules/@mui/material/styles/styled/index.js"),o=require("../../../node_modules/@mui/material/Chip/Chip/index.js");const i=r.default(o.default)(({theme:{palette:e},active:r,type:o,inActive:i})=>{var l,t,n,d,u,a,m,h,c,v,p,s,C,g;return{cursor:"pointer",fontSize:".75rem",color:null==(l=e.theme)?void 0:l.secondary[800],borderRadius:"rounded"===o?"1.5rem":"0.25rem",backgroundColor:null==(t=e.theme)?void 0:t.secondary[200],...r&&{"&.MuiChip-filled":{color:null==(n=e.theme)?void 0:n.primary[700],backgroundColor:null==(d=e.theme)?void 0:d.primary[200],"&:hover":{backgroundColor:null==(u=e.theme)?void 0:u.primary[200]}},"&.MuiChip-outlined":{color:null==(a=e.theme)?void 0:a.primary[800],borderColor:null==(m=e.theme)?void 0:m.primary[300],"&:hover":{backgroundColor:null==(h=e.theme)?void 0:h.primary[200]}}},...i&&{"&.MuiChip-filled":{color:null==(c=e.theme)?void 0:c.error[700],backgroundColor:null==(v=e.theme)?void 0:v.error[200],"&:hover":{backgroundColor:null==(p=e.theme)?void 0:p.error[200]}},"&.MuiChip-outlined":{color:null==(s=e.theme)?void 0:s.error[800],borderColor:null==(C=e.theme)?void 0:C.error[300],"&:hover":{backgroundColor:null==(g=e.theme)?void 0:g.error[200]}}},"& .MuiChip-icon":{marginRight:"0.125rem",marginLeft:"0rem",color:"inherit"},"& .MuiChip-deleteIcon":{marginLeft:"0.25rem",fontSize:".875rem",color:"inherit",marginRight:"0rem"},"&.MuiChip-root":{height:"fit-content",padding:"0.25rem 0.5rem",".MuiChip-label":{padding:"0rem"}}}}),l=r=>{const{label:o,type:l="rounded",variant:t="filled",active:n=!1,inActive:d=!1,...u}=r;/* @__PURE__ */
+return e.jsx(i,{label:o,variant:t,active:n,inActive:d,type:l,...u})};exports.Chip=l,exports.default=l;
 //# sourceMappingURL=index.js.map

package/dist/components/chip/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Chip as MUIChip, ChipProps, styled } from \"@mui/material\";\n\ninterface IChip extends ChipProps {\n  type?: \"rounded\" | \"normal\";\n  active?: boolean;\n  inActive?: boolean;\n  label?: string | React.ReactNode | number | JSX.Element;\n}\n\nconst StyledChip = styled(MUIChip)<IChip>(\n  ({ theme: { palette }, active, type, inActive }) => ({\n    cursor: \"pointer\",\n    fontSize: \".75rem\",\n    color: palette.theme?.secondary[800],\n    borderRadius: type === \"rounded\" ? \"1.5rem\" : \"0.25rem\",\n    backgroundColor: palette.theme?.secondary[200],\n    ...(active && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.primary[700],\n        backgroundColor: palette.theme?.primary[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.primary[800],\n        borderColor: palette.theme?.primary[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n    }),\n    ...(inActive && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.error[700],\n        backgroundColor: palette.theme?.error[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.error[800],\n        borderColor: palette.theme?.error[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n    }),\n\n    \"& .MuiChip-icon\": {\n      marginRight: \"0.125rem\",\n      marginLeft: \"0rem\",\n      color: \"inherit\",\n    },\n    \"& .MuiChip-deleteIcon\": {\n      marginLeft: \"0.25rem\",\n      fontSize: \".875rem\",\n      color: \"inherit\",\n      marginRight: \"0rem\",\n    },\n    \"&.MuiChip-root\": {\n      height: \"fit-content\",\n      padding: \"0.25rem 0.5rem\",\n      \".MuiChip-label\": {\n        padding: \"0rem\",\n      },\n    },\n  }),\n);\n\nconst Chip = (props: IChip) => {\n  const {\n    label,\n    type = \"rounded\",\n    variant = \"filled\",\n    active = false,\n    inActive = false,\n    ...rest\n  } = props;\n\n  return (\n    <StyledChip\n      label={label}\n      variant={variant}\n      active={active}\n      inActive={inActive}\n      type={type}\n      {...rest}\n    />\n  );\n};\n\nexport default Chip;\n"],"names":["StyledChip","styled","MUIChip","theme","palette","active","type","inActive","cursor","fontSize","color","_a","secondary","borderRadius","backgroundColor","_b","_c","primary","_d","_e","_f","borderColor","_g","_h","_i","error","_j","_k","_l","_m","_n","marginRight","marginLeft","height","padding","props","label","variant","rest","jsx"],"mappings":"mPASA,MAAMA,EAAaC,EAAAA,QAAOC,UAAPD,CACjB,EAAGE,OAASC,WAAWC,SAAQC,OAAMC,+CAAgB,MAAA,CACnDC,OAAQ,UACRC,SAAU,SACVC,MAAO,OAAAC,EAAAP,EAAQD,YAAR,EAAAQ,EAAeC,UAAU,KAChCC,aAAuB,YAATP,EAAqB,SAAW,UAC9CQ,gBAAiB,OAAAC,EAAAX,EAAQD,YAAR,EAAAY,EAAeH,UAAU,QACtCP,GAAU,CACZ,mBAAoB,CAClBK,MAAO,OAAAM,EAAAZ,EAAQD,YAAR,EAAAa,EAAeC,QAAQ,KAC9BH,gBAAiB,OAAAI,EAAAd,EAAQD,YAAR,EAAAe,EAAeD,QAAQ,KACxC,UAAW,CACTH,gBAAiB,OAAAK,EAAAf,EAAQD,YAAR,EAAAgB,EAAeF,QAAQ,OAG5C,qBAAsB,CACpBP,MAAO,OAAAU,EAAAhB,EAAQD,YAAR,EAAAiB,EAAeH,QAAQ,KAC9BI,YAAa,OAAAC,EAAAlB,EAAQD,YAAR,EAAAmB,EAAeL,QAAQ,KACpC,UAAW,CACTH,gBAAiB,OAAAS,EAAAnB,EAAQD,YAAR,EAAAoB,EAAeN,QAAQ,WAI1CV,GAAY,CACd,mBAAoB,CAClBG,MAAO,OAAAc,EAAApB,EAAQD,YAAR,EAAAqB,EAAeC,MAAM,KAC5BX,gBAAiB,OAAAY,EAAAtB,EAAQD,YAAR,EAAAuB,EAAeD,MAAM,KACtC,UAAW,CACTX,gBAAiB,OAAAa,EAAAvB,EAAQD,YAAR,EAAAwB,EAAeF,MAAM,OAG1C,qBAAsB,CACpBf,MAAO,OAAAkB,EAAAxB,EAAQD,YAAR,EAAAyB,EAAeH,MAAM,KAC5BJ,YAAa,OAAAQ,EAAAzB,EAAQD,YAAR,EAAA0B,EAAeJ,MAAM,KAClC,UAAW,CACTX,gBAAiB,OAAAgB,EAAA1B,EAAQD,YAAR,EAAA2B,EAAeL,MAAM,QAK5C,kBAAmB,CACjBM,YAAa,WACbC,WAAY,OACZtB,MAAO,WAET,wBAAyB,CACvBsB,WAAY,UACZvB,SAAU,UACVC,MAAO,UACPqB,YAAa,QAEf,iBAAkB,CAChBE,OAAQ,cACRC,QAAS,iBACT,iBAAkB,CAChBA,QAAS,4BAMHC,IACZ,MAAMC,MACJA,EAAA9B,KACAA,EAAO,UAAA+B,QACPA,EAAU,SAAAhC,OACVA,GAAS,EAAAE,SACTA,GAAW,KACR+B,GACDH;AAEJ,OACEI,EAAAA,IAACvC,EAAA,CACCoC,QACAC,UACAhC,SACAE,WACAD,UACIgC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/chip/chip.tsx"],"sourcesContent":["import { Chip as MUIChip, ChipProps, styled } from \"@mui/material\";\n\ninterface IChip extends ChipProps {\n  type?: \"rounded\" | \"normal\";\n  active?: boolean;\n  inActive?: boolean;\n  label?: string | React.ReactNode | number | JSX.Element;\n}\n\nconst StyledChip = styled(MUIChip)<IChip>(\n  ({ theme: { palette }, active, type, inActive }) => ({\n    cursor: \"pointer\",\n    fontSize: \".75rem\",\n    color: palette.theme?.secondary[800],\n    borderRadius: type === \"rounded\" ? \"1.5rem\" : \"0.25rem\",\n    backgroundColor: palette.theme?.secondary[200],\n    ...(active && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.primary[700],\n        backgroundColor: palette.theme?.primary[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.primary[800],\n        borderColor: palette.theme?.primary[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.primary[200]\n        },\n      },\n    }),\n    ...(inActive && {\n      \"&.MuiChip-filled\": {\n        color: palette.theme?.error[700],\n        backgroundColor: palette.theme?.error[200],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n      \"&.MuiChip-outlined\": {\n        color: palette.theme?.error[800],\n        borderColor: palette.theme?.error[300],\n        \"&:hover\": {\n          backgroundColor: palette.theme?.error[200]\n        },\n      },\n    }),\n\n    \"& .MuiChip-icon\": {\n      marginRight: \"0.125rem\",\n      marginLeft: \"0rem\",\n      color: \"inherit\",\n    },\n    \"& .MuiChip-deleteIcon\": {\n      marginLeft: \"0.25rem\",\n      fontSize: \".875rem\",\n      color: \"inherit\",\n      marginRight: \"0rem\",\n    },\n    \"&.MuiChip-root\": {\n      height: \"fit-content\",\n      padding: \"0.25rem 0.5rem\",\n      \".MuiChip-label\": {\n        padding: \"0rem\",\n      },\n    },\n  }),\n);\n\nconst Chip = (props: IChip) => {\n  const {\n    label,\n    type = \"rounded\",\n    variant = \"filled\",\n    active = false,\n    inActive = false,\n    ...rest\n  } = props;\n\n  return (\n    <StyledChip\n      label={label}\n      variant={variant}\n      active={active}\n      inActive={inActive}\n      type={type}\n      {...rest}\n    />\n  );\n};\n\nexport { Chip };\nexport default Chip;\n"],"names":["StyledChip","styled","MUIChip","theme","palette","active","type","inActive","cursor","fontSize","color","_a","secondary","borderRadius","backgroundColor","_b","_c","primary","_d","_e","_f","borderColor","_g","_h","_i","error","_j","_k","_l","_m","_n","marginRight","marginLeft","height","padding","Chip","props","label","variant","rest","jsx"],"mappings":"mPASA,MAAMA,EAAaC,EAAAA,QAAOC,UAAPD,CACjB,EAAGE,OAASC,WAAWC,SAAQC,OAAMC,+CAAgB,MAAA,CACnDC,OAAQ,UACRC,SAAU,SACVC,MAAO,OAAAC,EAAAP,EAAQD,YAAR,EAAAQ,EAAeC,UAAU,KAChCC,aAAuB,YAATP,EAAqB,SAAW,UAC9CQ,gBAAiB,OAAAC,EAAAX,EAAQD,YAAR,EAAAY,EAAeH,UAAU,QACtCP,GAAU,CACZ,mBAAoB,CAClBK,MAAO,OAAAM,EAAAZ,EAAQD,YAAR,EAAAa,EAAeC,QAAQ,KAC9BH,gBAAiB,OAAAI,EAAAd,EAAQD,YAAR,EAAAe,EAAeD,QAAQ,KACxC,UAAW,CACTH,gBAAiB,OAAAK,EAAAf,EAAQD,YAAR,EAAAgB,EAAeF,QAAQ,OAG5C,qBAAsB,CACpBP,MAAO,OAAAU,EAAAhB,EAAQD,YAAR,EAAAiB,EAAeH,QAAQ,KAC9BI,YAAa,OAAAC,EAAAlB,EAAQD,YAAR,EAAAmB,EAAeL,QAAQ,KACpC,UAAW,CACTH,gBAAiB,OAAAS,EAAAnB,EAAQD,YAAR,EAAAoB,EAAeN,QAAQ,WAI1CV,GAAY,CACd,mBAAoB,CAClBG,MAAO,OAAAc,EAAApB,EAAQD,YAAR,EAAAqB,EAAeC,MAAM,KAC5BX,gBAAiB,OAAAY,EAAAtB,EAAQD,YAAR,EAAAuB,EAAeD,MAAM,KACtC,UAAW,CACTX,gBAAiB,OAAAa,EAAAvB,EAAQD,YAAR,EAAAwB,EAAeF,MAAM,OAG1C,qBAAsB,CACpBf,MAAO,OAAAkB,EAAAxB,EAAQD,YAAR,EAAAyB,EAAeH,MAAM,KAC5BJ,YAAa,OAAAQ,EAAAzB,EAAQD,YAAR,EAAA0B,EAAeJ,MAAM,KAClC,UAAW,CACTX,gBAAiB,OAAAgB,EAAA1B,EAAQD,YAAR,EAAA2B,EAAeL,MAAM,QAK5C,kBAAmB,CACjBM,YAAa,WACbC,WAAY,OACZtB,MAAO,WAET,wBAAyB,CACvBsB,WAAY,UACZvB,SAAU,UACVC,MAAO,UACPqB,YAAa,QAEf,iBAAkB,CAChBE,OAAQ,cACRC,QAAS,iBACT,iBAAkB,CAChBA,QAAS,YAMXC,EAAQC,IACZ,MAAMC,MACJA,EAAA/B,KACAA,EAAO,UAAAgC,QACPA,EAAU,SAAAjC,OACVA,GAAS,EAAAE,SACTA,GAAW,KACRgC,GACDH;AAEJ,OACEI,EAAAA,IAACxC,EAAA,CACCqC,QACAC,UACAjC,SACAE,WACAD,UACIiC"}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,11 @@
+import { ChipProps } from '@mui/material';
+
+interface IChip extends ChipProps {
+    type?: "rounded" | "normal";
+    active?: boolean;
+    inActive?: boolean;
+    label?: string | React.ReactNode | number | JSX.Element;
+}
+declare const Chip: (props: IChip) => import("react/jsx-runtime").JSX.Element;
+export { Chip };
+export default Chip;

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

@@ -0,0 +1,2 @@
+export { default as Chip } from './chip';
+export * from './chip';

package/dist/components/chip-generator/chip-generator.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+
+interface ChipGeneratorProps {
+    name: string;
+    control: any;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    validation?: any[];
+    maxChips?: number;
+    allowDuplicates?: boolean;
+    fieldArrayName?: string;
+    endIcon?: React.ReactNode;
+    helperText?: string;
+    error?: boolean;
+    onChipAdd?: (chip: string) => void;
+    onChipRemove?: (chip: string, index: number) => void;
+    customChipProps?: any;
+    textFieldProps?: any;
+    allowMultipleAdd?: boolean;
+    delimiters?: string[];
+    dataType?: 'array' | 'string';
+    separator?: string;
+}
+declare const ChipGenerator: React.FC<ChipGeneratorProps>;
+export default ChipGenerator;

package/dist/components/chip-generator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChipGenerator } from './chip-generator';
+export * from './chip-generator';

package/dist/components/color-picker-input/color-picker-input/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import TextField from "../../text-field/text-field/index.esm.js";
+import { TextField } from "../../text-field/text-field/index.esm.js";
 import default_1 from "../../../node_modules/@mui/icons-material/ColorLens/index.esm.js";
 import _ from "lodash";
 import InputAdornment from "../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
@@ -28,6 +28,7 @@ const ColorPickerInput = ({ value, onChange, label, ...props }) => {
   );
 };
 export {
+  ColorPickerInput,
   ColorPickerInput as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/color-picker-input/color-picker-input/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/color-picker-input/color-picker-input.tsx"],"sourcesContent":["import { InputAdornment } from \"@mui/material\";\nimport TextField from \"../text-field/text-field\";\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport _ from \"lodash\";\nimport React from \"react\";\n\nconst ColorPickerInput = ({value, onChange, label, ...props}) => {\n\n   // Debounced function to update text\n   const debouncedSetColor = (\n    _.debounce((value) => {\n      onChange(value)\n    }, 500)\n  );\n\n  const handleColorChange = (e) => {\n    debouncedSetColor(e.target.value);\n  };\n\n  return (\n    <TextField\n            label={label || ''}\n            variant='outlined'\n            type=\"color\"\n            value={value}\n            onChange={handleColorChange}\n            size=\"small\"\n            fullWidth\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <ColorLensIcon fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            }}\n            {...props}\n          />\n  );\n}\n \nexport default ColorPickerInput;"],"names":["value","ColorLensIcon"],"mappings":";;;;;AAMA,MAAM,mBAAmB,CAAC,EAAC,OAAO,UAAU,OAAO,GAAG,YAAW;AAG9D,QAAM,oBACL,EAAE,SAAS,CAACA,WAAU;AACpB,aAASA,MAAK;AAAA,EAChB,GAAG,GAAG;AAGR,QAAM,oBAAoB,CAAC,MAAM;AAC/B,sBAAkB,EAAE,OAAO,KAAK;AAAA,EAClC;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACO,OAAO,SAAS;AAAA,MAChB,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAS;AAAA,MACT,YAAY;AAAA,QACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACC,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,MAAA;AAAA,MAGH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/color-picker-input/color-picker-input.tsx"],"sourcesContent":["import { InputAdornment } from \"@mui/material\";\nimport TextField from \"../text-field/text-field\";\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport _ from \"lodash\";\nimport React from \"react\";\n\nconst ColorPickerInput = ({value, onChange, label, ...props}) => {\n\n   // Debounced function to update text\n   const debouncedSetColor = (\n    _.debounce((value) => {\n      onChange(value)\n    }, 500)\n  );\n\n  const handleColorChange = (e) => {\n    debouncedSetColor(e.target.value);\n  };\n\n  return (\n    <TextField\n            label={label || ''}\n            variant='outlined'\n            type=\"color\"\n            value={value}\n            onChange={handleColorChange}\n            size=\"small\"\n            fullWidth\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <ColorLensIcon fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            }}\n            {...props}\n          />\n  );\n}\n \nexport { ColorPickerInput };\nexport default ColorPickerInput;"],"names":["value","ColorLensIcon"],"mappings":";;;;;AAMA,MAAM,mBAAmB,CAAC,EAAC,OAAO,UAAU,OAAO,GAAG,YAAW;AAG9D,QAAM,oBACL,EAAE,SAAS,CAACA,WAAU;AACpB,aAASA,MAAK;AAAA,EAChB,GAAG,GAAG;AAGR,QAAM,oBAAoB,CAAC,MAAM;AAC/B,sBAAkB,EAAE,OAAO,KAAK;AAAA,EAClC;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACO,OAAO,SAAS;AAAA,MAChB,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAS;AAAA,MACT,YAAY;AAAA,QACV,oCACG,gBAAA,EAAe,UAAS,SACvB,UAAA,oBAACC,WAAA,EAAc,UAAS,QAAA,CAAQ,EAAA,CAClC;AAAA,MAAA;AAAA,MAGH,GAAG;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/components/color-picker-input/color-picker-input/index.js

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../text-field/text-field/index.js"),r=require("../../../node_modules/@mui/icons-material/ColorLens/index.js"),n=require("lodash"),l=require("../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/* @__PURE__ */u(n);exports.default=({value:n,onChange:u,label:o,...i})=>{const d=a.default.debounce(e=>{u(e)},500);/* @__PURE__ */
-return e.jsx(t.default,{label:o||"",variant:"outlined",type:"color",value:n,onChange:e=>{d(e.target.value)},size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(l.default,{position:"start",children:/* @__PURE__ */e.jsx(r.default,{fontSize:"small"})})},...i})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../text-field/text-field/index.js"),r=require("../../../node_modules/@mui/icons-material/ColorLens/index.js"),n=require("lodash"),l=require("../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=/* @__PURE__ */o(n);const i=({value:n,onChange:o,label:i,...a})=>{const s=u.default.debounce(e=>{o(e)},500);/* @__PURE__ */
+return e.jsx(t.TextField,{label:i||"",variant:"outlined",type:"color",value:n,onChange:e=>{s(e.target.value)},size:"small",fullWidth:!0,InputProps:{startAdornment:/* @__PURE__ */e.jsx(l.default,{position:"start",children:/* @__PURE__ */e.jsx(r.default,{fontSize:"small"})})},...a})};exports.ColorPickerInput=i,exports.default=i;
 //# sourceMappingURL=index.js.map

package/dist/components/color-picker-input/color-picker-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/color-picker-input/color-picker-input.tsx"],"sourcesContent":["import { InputAdornment } from \"@mui/material\";\nimport TextField from \"../text-field/text-field\";\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport _ from \"lodash\";\nimport React from \"react\";\n\nconst ColorPickerInput = ({value, onChange, label, ...props}) => {\n\n   // Debounced function to update text\n   const debouncedSetColor = (\n    _.debounce((value) => {\n      onChange(value)\n    }, 500)\n  );\n\n  const handleColorChange = (e) => {\n    debouncedSetColor(e.target.value);\n  };\n\n  return (\n    <TextField\n            label={label || ''}\n            variant='outlined'\n            type=\"color\"\n            value={value}\n            onChange={handleColorChange}\n            size=\"small\"\n            fullWidth\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <ColorLensIcon fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            }}\n            {...props}\n          />\n  );\n}\n \nexport default ColorPickerInput;"],"names":["value","onChange","label","props","debouncedSetColor","_","debounce","jsx","TextField","variant","type","e","target","size","fullWidth","InputProps","startAdornment","InputAdornment","position","children","ColorLensIcon","fontSize"],"mappings":"icAMyB,EAAEA,QAAOC,WAAUC,WAAUC,MAGnD,MAAMC,EACLC,EAAAA,QAAEC,SAAUN,IACVC,EAASD,IACR;AAOL,OACEO,EAAAA,IAACC,EAAAA,QAAA,CACON,MAAOA,GAAS,GAChBO,QAAQ,WACRC,KAAK,QACLV,QACAC,SAViBU,IACzBP,EAAkBO,EAAEC,OAAOZ,QAUnBa,KAAK,QACLC,WAAS,EACTC,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvBC,wBAAAZ,EAAAA,IAACa,EAAAA,QAAA,CAAcC,SAAS,gBAI1BlB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/color-picker-input/color-picker-input.tsx"],"sourcesContent":["import { InputAdornment } from \"@mui/material\";\nimport TextField from \"../text-field/text-field\";\nimport ColorLensIcon from '@mui/icons-material/ColorLens';\nimport _ from \"lodash\";\nimport React from \"react\";\n\nconst ColorPickerInput = ({value, onChange, label, ...props}) => {\n\n   // Debounced function to update text\n   const debouncedSetColor = (\n    _.debounce((value) => {\n      onChange(value)\n    }, 500)\n  );\n\n  const handleColorChange = (e) => {\n    debouncedSetColor(e.target.value);\n  };\n\n  return (\n    <TextField\n            label={label || ''}\n            variant='outlined'\n            type=\"color\"\n            value={value}\n            onChange={handleColorChange}\n            size=\"small\"\n            fullWidth\n            InputProps={{\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <ColorLensIcon fontSize=\"small\" />\n                </InputAdornment>\n              ),\n            }}\n            {...props}\n          />\n  );\n}\n \nexport { ColorPickerInput };\nexport default ColorPickerInput;"],"names":["ColorPickerInput","value","onChange","label","props","debouncedSetColor","_","debounce","jsx","TextField","variant","type","e","target","size","fullWidth","InputProps","startAdornment","InputAdornment","position","children","ColorLensIcon","fontSize"],"mappings":"ibAMA,MAAMA,EAAmB,EAAEC,QAAOC,WAAUC,WAAUC,MAGnD,MAAMC,EACLC,EAAAA,QAAEC,SAAUN,IACVC,EAASD,IACR;AAOL,OACEO,EAAAA,IAACC,EAAAA,UAAA,CACON,MAAOA,GAAS,GAChBO,QAAQ,WACRC,KAAK,QACLV,QACAC,SAViBU,IACzBP,EAAkBO,EAAEC,OAAOZ,QAUnBa,KAAK,QACLC,WAAS,EACTC,WAAY,CACVC,oCACGC,UAAA,CAAeC,SAAS,QACvBC,wBAAAZ,EAAAA,IAACa,EAAAA,QAAA,CAAcC,SAAS,gBAI1BlB"}

package/dist/components/color-picker-input/color-picker-input.d.ts

@@ -0,0 +1,8 @@
+declare const ColorPickerInput: ({ value, onChange, label, ...props }: {
+    [x: string]: any;
+    value: any;
+    onChange: any;
+    label: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ColorPickerInput };
+export default ColorPickerInput;

package/dist/components/color-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ColorPickerInput } from './color-picker-input';
+export * from './color-picker-input';