@erpsquad/common 1.8.111 → 1.8.112

package/dist/_virtual/index/index.esm.js

@@ -1,5 +1,7 @@
-var propTypes = { exports: {} };
+import { getAugmentedNamespace } from "../_commonjsHelpers/index.esm.js";
+import * as index from "../../node_modules/@mui/material/utils/index/index.esm.js";
+var require$$0 = /* @__PURE__ */ getAugmentedNamespace(index);
 export {
-  propTypes as __module
+  require$$0 as default
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/_virtual/index/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_virtual/index/index.esm2.js

@@ -1,7 +1,5 @@
-import { getAugmentedNamespace } from "../_commonjsHelpers/index.esm.js";
-import * as index from "../../node_modules/@mui/material/utils/index/index.esm.js";
-var require$$0 = /* @__PURE__ */ getAugmentedNamespace(index);
+var propTypes = { exports: {} };
 export {
-  require$$0 as default
+  propTypes as __module
 };
 //# sourceMappingURL=index.esm2.js.map

package/dist/_virtual/index/index.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.esm2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.__module={exports:{}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_commonjsHelpers/index.js"),r=require("../../node_modules/@mui/material/utils/index/index.js"),s=/* @__PURE__ */e.getAugmentedNamespace(r);exports.default=s;
 //# sourceMappingURL=index.js.map

package/dist/_virtual/index/index2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_commonjsHelpers/index.js"),r=require("../../node_modules/@mui/material/utils/index/index.js"),s=/* @__PURE__ */e.getAugmentedNamespace(r);exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.__module={exports:{}};
 //# sourceMappingURL=index2.js.map

package/dist/components/accordion/accordion.d.ts

@@ -5,6 +5,6 @@ interface AccordionProps {
     children?: React.ReactNode;
     accordionProps?: Partial<MUIAccordionProps>;
 }
-declare const Accordion: import('react').NamedExoticComponent<AccordionProps>;
+declare const Accordion: import('react').MemoExoticComponent<(props: AccordionProps) => import("react/jsx-runtime").JSX.Element>;
 export { Accordion };
 export default Accordion;

package/dist/components/action-bar/action-bar.d.ts

@@ -45,6 +45,6 @@ interface SavedFilter {
     name: string;
     query: RuleGroupType;
 }
-declare const ActionBar: React.NamedExoticComponent<ActionBarPropsType>;
+declare const ActionBar: React.MemoExoticComponent<(props: ActionBarPropsType) => import("react/jsx-runtime").JSX.Element>;
 export { ActionBar };
 export default ActionBar;

package/dist/components/charts/areaLinerChart/index.esm.js

@@ -42,13 +42,14 @@ const AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelTyp
     };
   }, []);
   useEffect(() => {
+    var _a, _b;
     if (containerWidth === 0) return;
     const margin = { top: 20, right: 30, bottom: 30, left: 40 };
     const width = containerWidth - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     select(svgRef.current).selectAll("*").remove();
     const svg = select(svgRef.current).attr("width", containerWidth).attr("height", height).append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    const x = point().domain(data[0].values.map((d) => d.month)).range([0, width]);
+    const x = point().domain((_b = (_a = data[0]) == null ? void 0 : _a.values) == null ? void 0 : _b.map((d) => d.month)).range([0, width]);
     const y = linear().domain([0, max(data, (dataset) => max(dataset.values, (d) => d.value))]).range([chartHeight, 0]);
     const numTicks = Math.floor(width / 80);
     const xAxis = axisBottom(x).ticks(numTicks);

package/dist/components/charts/areaLinerChart/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\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\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\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        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\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} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\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\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\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        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0]?.values?.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\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} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["d3.format","d3.select","d3.scalePoint","d3.scaleLinear","d3.max","d3.axisBottom","d3.axisLeft","line","d3.line","d3.curveMonotoneX","d3.curveLinear","area","d3.area"],"mappings":"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"}

package/dist/components/charts/areaLinerChart/index.js

@@ -1,4 +1,4 @@
-"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"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");const f=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const A=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",A),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
+"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"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");const f=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{var e,t;if(0===q)return;const n=q-40-30,y=m-20-30;o.default(j.current).selectAll("*").remove();const k=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),_=s.point().domain(null==(t=null==(e=f[0])?void 0:e.values)?void 0:t.map(e=>e.month)).range([0,n]),b=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([y,0]),E=Math.floor(n/80),w=l.axisBottom(_).ticks(E),A=k.append("g").attr("transform",`translate(0,${y})`).call(w);A.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const S=k.append("g");S.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(b).tickSize(-n).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),A.selectAll(".tick line").remove(),S.select(".domain").attr("stroke","none"),A.select(".domain").attr("stroke","none");const L=i.default().x(e=>_(e.month)).y0(y).y1(e=>b(e.value));f.forEach((e,t)=>{const r=k.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),k.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",L),k.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>_(e.month)).y(e=>b(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&k.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>_(e.month)).attr("cy",e=>b(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
 /* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
 /* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};exports.AreaLineChart=f,exports.default=f;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/areaLinerChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\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\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\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        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\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} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["AreaLineChart","data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\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\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\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        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0]?.values?.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\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} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport { AreaLineChart };\nexport default AreaLineChart;\n"],"names":["AreaLineChart","data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","_b","_a","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"00BAcA,MASMA,EAAgB,EAAGC,OAAMC,SAAS,IAAKC,uBAAsBC,iBAAiB,UAAWC,WAAUC,SAAQC,mBAC7G,MAAMC,EAASC,EAAAA,OAA6B,MACtCC,EAAaD,EAAAA,OAAuB,OACnCE,EAAgBC,GAAqBC,EAAAA,SAAiB,IACtDC,EAAaC,GAAkBF,EAAAA,SAAc,MAiKpD,OAhKAG,EAAAA,UAAU,KACN,MAAMC,EAAUP,EAAWQ,QAErBC,EAAiB,IAAIC,eAAgBC,IACvC,GAAIA,EAAQ,GAAI,CACZ,MAAMC,EAAWD,EAAQ,GAAGE,YAAYC,MACxCZ,EAAkBU,EACtB,IAOJ,OAJIL,GACAE,EAAeM,QAAQR,GAGpB,KACCA,GACAE,EAAeO,UAAUT,KAGlC,IAEHD,EAAAA,UAAU,aACN,GAAuB,IAAnBL,EAAsB,OAE1B,MACMa,EAAQb,EADyC,GAAtB,GAE3BgB,EAAczB,EAFE,GAAuB,GAK7C0B,EAAAA,QAAUpB,EAAOU,SAASW,UAAU,KAAKC,SAEzC,MAAMC,EAAMH,EAAAA,QACApB,EAAOU,SACdc,KAAK,QAASrB,GACdqB,KAAK,SAAU9B,GACf+B,OAAO,KACPD,KAAK,YAAa,oBAGjBE,EAAIC,EAAAA,QAELC,OAAO,OAAAC,EAAA,OAAAC,EAAArC,EAAK,SAAL,EAAAqC,EAASC,iBAAQC,IAAIC,GAAKA,EAAEC,QACnCC,MAAM,CAAC,EAAGnB,IAEToB,EAAIC,YAELT,OAAO,CAAC,EAAGU,EAAAA,QAAO7C,EAAM8C,GAAWD,UAAOC,EAAQR,OAAQE,GAAKA,EAAEO,UACjEL,MAAM,CAAChB,EAAa,IAGnBsB,EAAWC,KAAKC,MAAM3B,EAAQ,IAC9B4B,EAAQC,EAAAA,WAAcnB,GAAGoB,MAAML,GAE/BM,EAAaxB,EAAIE,OAAO,KACzBD,KAAK,YAAa,eAAeL,MACjC6B,KAAKJ,GAEVG,EAAW1B,UAAU,QAChBG,KAAK,YAAa,oBAClBA,KAAK,QAAS,WACdyB,MAAM,cAAe,UAG1B,MAAMC,EAAQ3B,EAAIE,OAAO,KACzByB,EAAMzB,OAAO,KAAKD,KAAK,QAAS,WAAWA,KAAK,YAAa,oBACxDwB,KAAKG,WAAYf,GAAGgB,UAAUpC,GAAOqC,WAAYpB,IAC9CtC,SACMA,EAAqBsC,IAjFrBqB,EAkFarB,EAlFAsB,EAkFG1D,EAjFhB,eAD6B2D,EAkFH5D,GAhFjC,GAAG6D,EAAAA,OAAU,MAAVA,CAAiBH,EAAM,OACZ,YAAdE,EACA,GAAGD,GAAU,MAAME,EAAAA,OAAU,MAAVA,CAAiBH,GAAKI,QAAQ,IAAK,OAE1DJ,EAAIK,YANM,IAACL,EAAaC,EAAgBC,IAmFrCI,cAAc,IACfvC,UAAU,QACVG,KAAK,mBAAoB,OACzBA,KAAK,SAAU,WAEpBuB,EAAW1B,UAAU,cAAcC,SACnC4B,EAAMW,OAAO,WAAWrC,KAAK,SAAU,QACvCuB,EAAWc,OAAO,WAAWrC,KAAK,SAAU,QAM5C,MAKMsC,EAAOC,EAAAA,UACRrC,EAAEO,GAAKP,EAAEO,EAAEC,QACX8B,GAAG7C,GACH8C,MAAQ7B,EAAEH,EAAEO,QAGjB/C,EAAKyE,QAAQ,CAAC3B,EAAS4B,KAInB,MAAMC,EAAW7C,EAAIE,OAAO,QACvBA,OAAO,kBACPD,KAAK,KAAM,iBAAiB2C,KAC5B3C,KAAK,KAAM,MACXA,KAAK,KAAM,MACXA,KAAK,KAAM,MACXA,KAAK,KAAM,QArBP,IAAC6C,EAuBVD,EAAS3C,OAAO,QACXD,KAAK,SAAU,MACfA,KAAK,aAAc1B,EAAOqE,IAC1B3C,KAAK,eAAgB,IAE1B4C,EAAS3C,OAAO,QACXD,KAAK,SAAU,QACfA,KAAK,aAAc1B,EAAOqE,IAC1B3C,KAAK,eAAgB,IAG1BD,EAAIE,OAAO,QACN6C,MAAM/B,EAAQR,QACdP,KAAK,OAAQ,sBAAsB2C,MACnC3C,KAAK,IAAKsC,GAGfvC,EAAIE,OAAO,QACN6C,MAAM/B,EAAQR,QACdP,KAAK,OAAQ,QACbA,KAAK,SAAU1B,EAAOqE,IACtB3C,KAAK,eAAgB,GACrBA,KAAK,KA7CA6C,EA6CU9B,EAAQ8B,WAAY,EA7CRE,YAC/B7C,EAAEO,GAAKP,EAAEO,EAAEC,QACXE,EAAEH,GAAKG,EAAEH,EAAEO,QACXgC,MAAMH,EAAWI,EAAAA,UAAoBC,cA8ClC,MAAAnC,OAAA,EAAAA,EAASoC,aACLpD,EAAIF,UAAU,UAAU8C,KACnB1E,KAAK8C,EAAQR,QACb6C,QACAnD,OAAO,UACPD,KAAK,KAAMS,GAAKP,EAAEO,EAAEC,QACpBV,KAAK,KAAMS,GAAKG,EAAEH,EAAEO,QACpBhB,KAAK,IAAK,GACVA,KAAK,OAAQ1B,EAAOqE,IACpB3C,KAAK,SAAU,QACfyB,MAAM,SAAU,WAChB4B,GAAG,YAAa,SAAUC,EAAO7C,GAC9B1B,EAAe,CACXmB,EAAG,GAAGoD,EAAMC,MAAQ,OACpB3C,EAAM0C,EAAME,MAAQ,GAAjB,KACHC,QAAS,GAAG1C,EAAQ2C,SAASjD,EAAEO,UAEnCpB,EAAAA,QAAU+D,MAAMC,aAAa5D,KAAK,IAAK,GAAGA,KAAK,OAAQ,UAC3D,GACCqD,GAAG,WAAY,WACZtE,EAAe,MACfa,EAAAA,QAAU+D,MAAMC,aAAa5D,KAAK,IAAK,GAAGA,KAAK,OAAQ1B,EAAOqE,GAClE,MAKjB,CAAC1E,EAAMU,EAAgBT,EAAQC,EAAsBC,EAAgBC,EAAUC,EAAQC,mBAGtFsF,OAAC,MAAA,CAAIC,IAAKpF,EAAY+C,MAAO,CAAEjC,MAAO,OAAQtB,OAAQ,QAClD6F,SAAA;eAAAF,EAAAA,KAAC,MAAA,CAAIpC,MAAO,CAAEuC,SAAU,YACpBD,SAAA;eAAAE,EAAAA,IAAC,MAAA,CAAIH,IAAKtF,EAAQgB,MAAM,OAAOtB,WAE3BK,GACAA,KAIPO,kBACGmF,EAAAA,IAACC,UAAA,CAAIC,GAAI,CACLH,SAAU,WACVI,KAAMtF,EAAYoB,EAClBmE,IAAKvF,EAAY8B,EACjB0D,cAAe,OACfC,gBAAiB,UACjBC,OAAQ,QACRC,OAAQ,OACRC,aAAc,MACdC,UAAW,yBACXC,QAAS,kBACTC,IAAK,QAELd,wBAAAE,EAAAA,IAAC,OAAA,CAAKxC,MAAO,CAAEqD,SAAU,OAAQC,OAAQ,MAAOC,MAAO,SAClDjB,SAAAjF,EAAY2E"}

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

@@ -1,5 +1,5 @@
 import { CheckboxProps } from '@mui/material';
 
-declare const Checkbox: import('react').NamedExoticComponent<CheckboxProps>;
+declare const Checkbox: import('react').MemoExoticComponent<(props: CheckboxProps) => import("react/jsx-runtime").JSX.Element>;
 export { Checkbox };
 export default Checkbox;

package/dist/components/date-picker/date-picker.d.ts

@@ -16,6 +16,6 @@ export interface DatePickerProps {
     textFieldProps?: any;
     format?: string;
 }
-declare const DatePicker: import('react').NamedExoticComponent<DatePickerProps>;
+declare const DatePicker: import('react').MemoExoticComponent<(props: DatePickerProps) => import("react/jsx-runtime").JSX.Element>;
 export { DatePicker };
 export default DatePicker;

package/dist/components/footer/footer.d.ts

@@ -17,6 +17,6 @@ interface IFooter {
     isPaginationDisplayed?: boolean;
     isPageSaving?: boolean;
 }
-declare const Footer: React.NamedExoticComponent<IFooter>;
+declare const Footer: React.MemoExoticComponent<({ pages, setPages, currentPage, setCurrentPage, total, paginationModel, handlePaginationModel, sharedPages, resource, savePageConfiguration, handlePageDelete, enablePages, isPaginationDisplayed, isPageSaving }: IFooter) => import("react/jsx-runtime").JSX.Element>;
 export { Footer };
 export default Footer;

package/dist/components/form-control/form-builder/form-builder-element/media.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 
-declare const DynamicMedia: React.NamedExoticComponent<any>;
+declare const DynamicMedia: React.MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
 export { DynamicMedia };
 export default DynamicMedia;

package/dist/components/form-control/form-builder/form-builder-element/phone.d.ts

@@ -1,4 +1,4 @@
 
-declare const DynamicPhone: import('react').NamedExoticComponent<any>;
+declare const DynamicPhone: import('react').MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
 export { DynamicPhone };
 export default DynamicPhone;

package/dist/components/form-control/form-builder/form-builder-element/select.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 
-declare const DynamicSelect: React.NamedExoticComponent<any>;
+declare const DynamicSelect: React.MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
 export { DynamicSelect };
 export default DynamicSelect;

package/dist/components/form-control/form-builder/form-builder-element/text.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 
-declare const DynamicInput: React.NamedExoticComponent<any>;
+declare const DynamicInput: React.MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
 export { DynamicInput };
 export default DynamicInput;

package/dist/components/form-control/form-builder/form-builder-element/time.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 
-declare const DynamicTime: React.NamedExoticComponent<any>;
+declare const DynamicTime: React.MemoExoticComponent<(props: any) => import("react/jsx-runtime").JSX.Element>;
 export { DynamicTime };
 export default DynamicTime;

package/dist/components/form-control/form-parser/form-switcher.d.ts

@@ -1,3 +1,3 @@
-declare const FormSwitcher: import('react').NamedExoticComponent<any>;
+declare const FormSwitcher: import('react').MemoExoticComponent<({ children, isFormSwitcher, control, fieldArrayName, formSwitcherName, label, resetForm, }: any) => import("react/jsx-runtime").JSX.Element>;
 export { FormSwitcher };
 export default FormSwitcher;

package/dist/components/icons/action-arrow.d.ts

@@ -1,4 +1,4 @@
-export declare const ActionArrow: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ActionArrow: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ActionArrow;

package/dist/components/icons/add-circle.d.ts

@@ -1,4 +1,4 @@
-export declare const AddCircle: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const AddCircle: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default AddCircle;

package/dist/components/icons/arrow-bidirectional.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowBidirectional: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowBidirectional: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowBidirectional;

package/dist/components/icons/arrow-circle-down.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowCircleDown: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowCircleDown: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowCircleDown;

package/dist/components/icons/arrow-down-three.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowDownThree: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowDownThree: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowDownThree;

package/dist/components/icons/arrow-down-two.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowDownTwo: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowDownTwo: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowDownTwo;

package/dist/components/icons/arrow-down.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowDown: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowDown: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowDown;

package/dist/components/icons/arrow-up-down.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowUpDown: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowUpDown: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowUpDown;

package/dist/components/icons/arrow-up-two.d.ts

@@ -1,4 +1,4 @@
-export declare const ArrowUpTwo: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const ArrowUpTwo: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default ArrowUpTwo;

package/dist/components/icons/assignments.d.ts

@@ -1,4 +1,4 @@
-export declare const Assignments: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const Assignments: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Assignments;

package/dist/components/icons/blank-circle.d.ts

@@ -1,4 +1,4 @@
-export declare const BlankCircle: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const BlankCircle: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default BlankCircle;

package/dist/components/icons/block-filled.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const BlockFiled: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: React.Ref<React.Component<{}, any, any>>;
-}>;
+export declare const BlockFiled: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default BlockFiled;

package/dist/components/icons/calendar-add.d.ts

@@ -1,4 +1,4 @@
-export declare const CalendarAdd: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const CalendarAdd: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default CalendarAdd;

package/dist/components/icons/calendar.d.ts

@@ -1,4 +1,4 @@
-export declare const Calendar: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const Calendar: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Calendar;

package/dist/components/icons/checkbox-square.d.ts

@@ -1,4 +1,4 @@
-export declare const CheckboxSquare: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const CheckboxSquare: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default CheckboxSquare;

package/dist/components/icons/circular-arrow-setting.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const CircularArrowSetting: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: React.Ref<React.Component<{}, any, any>>;
-}>;
+export declare const CircularArrowSetting: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default CircularArrowSetting;

package/dist/components/icons/clock.d.ts

@@ -1,4 +1,4 @@
-export declare const Clock: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const Clock: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Clock;

package/dist/components/icons/close.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const Close: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: React.Ref<React.Component<{}, any, any>>;
-}>;
+export declare const Close: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Close;

package/dist/components/icons/coin-outline.d.ts

@@ -1,4 +1,4 @@
-export declare const CoinOutline: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const CoinOutline: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default CoinOutline;

package/dist/components/icons/copy.d.ts

@@ -1,4 +1,4 @@
-export declare const Copy: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const Copy: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Copy;

package/dist/components/icons/coupon.d.ts

@@ -1,4 +1,4 @@
-export declare const Coupon: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: import('react').Ref<import('react').Component<{}, any, any>>;
-}>;
+export declare const Coupon: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: import('react').Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default Coupon;

package/dist/components/icons/cross-hire.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const CrossHire: import('@emotion/styled').StyledComponent<Pick<{}, never> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {
-    ref?: React.Ref<React.Component<{}, any, any>>;
-}>;
+export declare const CrossHire: import('@emotion/styled').StyledComponent<import('@mui/material').SvgIconOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, "classes" | "children" | "className" | "sx" | "style" | "color" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export default CrossHire;